Fab


Usage

The FAB (aka Floating Action Button) is a button that appears in front of all screen content.

$3

``
npm i @finastra/fab
`

`ts
import '@finastra/fab';
...

`

$3


#### 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 | | |
| showIconAtEnd | | boolean | | |
| styles | | CSSResult[] | ["styles"] | |

#### CSS Custom Properties

| Property | Type | Default | Description |
|-------------------|-------|-----------|------------------|
| --fds-primary | color | "#694ED6" | Primary color. |
| --fds-secondary` | color | "#C137A2" | Secondary color. |