FAB
A floating button along with icon & label.
Usage
FAB
function FABUsage() {
return <FAB title="FAB" icon={<Icon name="add" size={24} color="white" />} />
}
Offset
function FABOffset() {
return (
<FAB
size="large"
icon={<Icon name="add" size={32} color="white" />}
offsetX={48}
offsetY={120}
/>
)
}
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 | -- |
| size | BlossomSize | medium | -- |