@finastra/fab
v1.8.1
Published
Fab Web Component
Downloads
15
Readme
Fab
Usage
The FAB (aka Floating Action Button) is a button that appears in front of all screen content.
Import
npm i @finastra/fab
import '@finastra/fab';
...
<fds-fab extended gradient label="Edit" icon="edit"></fds-fab>
API
Properties
| Property | Attribute | Type | Default | Description |
|----------------------|------------|---------------------------|------------|----------------------------|
| dense
| dense
| boolean
| false | Make the fab smaller. |
| disabled
| | boolean
| | |
| exited
| | boolean
| | |
| extended
| extended
| boolean
| false | Make the fab extended. |
| gradient
| gradient
| boolean
| false | Apply gradient color. |
| icon
| icon
| string
| "add" | Fab icon. |
| label
| label
| string
| "Action" | Label in the extended fab. |
| mini
| | boolean
| | |
| reducedTouchTarget
| | boolean
| | |
| ripple
| | Promise<Ripple \| null>
| | |
| showIconAtEnd
| | boolean
| | |
| styles
| | CSSResult[]
| ["styles"] | |
CSS Custom Properties
| Property | Type | Default | Description |
|-------------------|-------|-----------|------------------|
| --fds-primary
| color | "#694ED6" | Primary color. |
| --fds-secondary
| color | "#C137A2" | Secondary color. |