-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Floating Action Button React Component
Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Floating Action Button React component represents Floating Action Button element.
Usage examples
Floating action button
<Fab color="pink" onClick={doSomething}>
<Icon icon="icon-plus"></Icon>
</Fab>
Renders to:
<a href="#" class="floating-action-button color-pink">
<i class="icon icon-plus"></i>
</a>
Speed Dial
<FabSpeedDial>
<!-- Actions -->
<FabActions>
<FabAction color="pink" onClick={onActionClick}>A</FabAction>
<FabAction color="orange" onClick={onActionClick}>B</FabAction>
<FabAction color="green" onClick={onActionClick}>C</FabAction>
</FabActions>
<!-- FAB -->
<Fab>
<!-- First icon to open Actions -->
<Icon icon="icon-plus"></Icon>
<!-- Second icon to close Actions -->
<Icon icon="icon-close"></Icon>
</Fab>
</FabSpeedDial>
Renders to:
<div class="speed-dial">
<!-- Actions -->
<div class="speed-dial-buttons">
<a href="#" class="pink">A</a>
<a href="#" class="orange">B</a>
<a href="#" class="green">C</a>
</div>
<!-- FAB -->
<a href="#" class="floating-action-button color-pink">
<i class="icon icon-plus"></i>
<i class="icon icon-close"></i>
</a>
</div>
Properties
Prop | Type | Description |
---|---|---|
<Fab> | ||
color | string | Button color. One of default colors |
<FabSpeedDial> | ||
theme | string | Actions theme color. One of default colors |
<FabActions> | ||
theme | string | Actions theme color. One of default colors |
<FabAction> | ||
closeSpeedDial | boolean | Enable and speed dial will be closed on this button click |
color | string | Action button color. One of default colors |