Overview
The FAB (Floating Action Button) is a prominent circular button that floats above the content of your application. It is typically used for the most important action on a page, such as creating a new item or starting a new task. The FAB is designed to be easily accessible and visually distinct, drawing the user's attention to the primary action.
Variants
The FAB component supports several color variants to fit different design contexts. The available colors are:
- Primary: A FAB that stands out as the main action button.
- Secondary: A FAB for secondary actions, providing a less prominent alternative.
- Tertiary: A FAB for less critical actions, often used for additional options or features.
Sizes
The FAB component also supports different sizes to fit various contexts, such as compact buttons for toolbars or larger buttons for prominent actions. The available sizes include:
- Small: A compact FAB for less prominent actions.
- Medium: The default size, suitable for most use cases.
- Large: A larger FAB for actions that require more emphasis.
API Reference
FAB
A Floating Action Button component for highlighting the primary action in an interface.
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | "primary-container" | "secondary-container" | "tertiary-container" | "primary" | The visual variant of the FAB |
shape | "round" | "square" | "round" | The shape style of the FAB |
size | "small" | "medium" | "large" | "small" | The size of the FAB |
children | React.ReactNode | Required | The content to display in the FAB, typically an Icon |
Inherited Props
The FAB component accepts all standard HTML button element props.