Fab ​
Sizes
Loading...
Extended
Loading...
A floating action button (FAB) represents the primary action of a screen.
- Tag:
<flint-fab> - Class:
FlintFab
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintFab } from '@getufy/flint-ui';Usage ​
html
<flint-fab></flint-fab>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
extended | extended | boolean | false | |
disabled | disabled | boolean | false | |
label | label | string | 'Action' | Accessible label for icon-only (non-extended) FABs. |
position | position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'static' | 'bottom-right' |
Slots ​
| Name | Description |
|---|---|
icon | The icon to display inside the FAB. |
(default) | Default slot for icon content (icon-only FAB). |
label | The label to display in the extended FAB. |
CSS Parts ​
| Name | Description |
|---|---|
base | The component's base wrapper element. |
icon | The icon container. |
label | The label element. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-fab-size | — |
--flint-fab-radius | — |
--flint-fab-background | — |
--flint-fab-color | — |
--flint-fab-shadow | — |
--flint-primary-color | — |
--flint-text-color-on-primary | — |
--flint-shadow-lg | — |
--flint-shadow-xl | — |
--flint-font-family | — |