top right bottom left

Floating Action Buttons are contained in a ux-floating-action-buttons component. Each action button should be added as a child using the ux-floating-action-button component.

The fab-primary attribute should be added to the floating action button that will permanently be visible and will be used to display the additional buttons when clicked.

To trigger an event when a button is pressed simply add the (click) event to the ux-floating-action-button element.

The following input can be used to customize the behavior of the ux-floating-action-buttons component:

Defines direction items should be displayed. Possible values are top, right, bottom or left. Emits an event when the list of additional buttons is opened or closed.

The following code can be used to create the example above:

Note: The root module must import BrowserAnimationsModule from '@angular/platform-browser/animations'.