FAB
Floating Action Button that appears above content, typically used for primary actions.
Supports icon, label, and custom positioning.
Usage
FAB
function FABUsage() {
return <FAB title="FAB" icon={<Icon name="add" size={24} color="white" />} />
}
Offset
Use the offsetX & offsetY props to adjust the FAB’s position from screen edges across both axis, allowing precise control over placement.
function FABOffset() {
return (
<FAB
size="large"
icon={<Icon name="add" size={32} color="white" />}
offsetX={150}
offsetY={40}
/>
)
}
Props
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | ButtonProps | -- | Inherits properties from ButtonProps |
| icon | ReactNode | -- | Set the icon of the FAB |
| offsetX | number | 48 | Horizontal offset position for the fab |
| offsetY | number | 48 | Vertical offset position for the fab |
| mode | ButtonMode | filled | Change the appearance of the button using this |
| title | string | -- | Button title text |
| titleStyle | StyleProp<TextStyle> | -- | Title text style |
| style | StyleProp<ViewStyle> | -- | Button style to add padding/margin etc. |
| isLoading | boolean | -- | Set it to true to show the activity indicator to the left |
| disabled | boolean | -- | Set to true to disable the button |
| disabledStyle | StyleProp<ViewStyle> | -- | button style for disabled state |
| disabledTitleStyle | StyleProp<TextStyle> | -- | button text style for disabled state |
| left | ReactNode | -- | Render any icon/JSX on left of the title |
| right | ReactNode | -- | Render any icon/JSX on right of the title |
| loaderProps | ActivityIndicatorProps | -- | Loader props |
| status | BlossomStatus | primary | Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error' |
| size | BlossomSize | medium | Size of the component'small' | 'medium' | 'large' |