Button React component represents Framework7's Buttons elements.
<Button>Button Text</Button>
Renders to:
<a href="#" class="button">Button Text</a>
<ButtonsSegmented>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonsSegmented>
Renders to:
<div class="buttons-row">
<a href="#" class="button">Button 1</a>
<a href="#" class="button">Button 2</a>
<a href="#" class="button">Button 3</a>
</div>
<!-- Tabs -->
<Tabs>
<Tab id="tab-1" active>Tab 1</Tab>
<Tab id="tab-2">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<ButtonsSegmented>
<Button tabLink="#tab-1" active>Button 1</Button>
<Button tabLink="#tab-2">Button 2</Button>
</ButtonsSegmented>
Renders to:
<!-- Tabs -->
<div class="tabs">
<div class="tab active" id="tab-1">Tab 1</div>
<div class="tab" id="tab-2">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" data-tab="#tab-1" class="tab-link">Show Tab 1</a>
<a href="#" data-tab="#tab-2" class="tab-link">Show Tab 2</a>
<div class="buttons-row">
<a href="#" data-tab="#tab-1" class="button active">Button 1</a>
<a href="#" data-tab="#tab-2" class="button">Button 2</a>
</div>
Note, this requires tab routes to be configured.
<!-- Tabs -->
<Tabs>
<Tab routeTabId="tab-1">Tab 1</Tab>
<Tab routeTabId="tab-2">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<ButtonsSegmented>
<Button routeTabLink="#tab-1" href="/tabs/">Button 1</Button>
<Button routeTabLink="#tab-2" href="/tabs/tab-2/">Button 2</Button>
</ButtonsSegmented>
Renders to:
<!-- Tabs -->
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
<div class="buttons-row">
<a href="#" class="button active">Button 1</a>
<a href="#" class="button">Button 2</a>
</div>
<Button color="red">Red Button</Button>
<Button color="green">Green Button</Button>
<ButtonsSegmented theme="orange">
<Button active>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonsSegmented>
<!-- With custom Touch-Ripple color, affects Material theme only -->
<Button rippleColor="yellow">YellowRipple Button</Button>
Renders to:
<a href="#" class="button color-red">Red Button</a>
<a href="#" class="button color-green">Green Button</a>
<div class="buttons theme-orange">
<a href="#" class="button active">Button 1</a>
<a href="#" class="button">Button 2</a>
</div>
<a href="#" class="button ripple-yellow">Yellow-ripple Button</a>
<Button big color="red">Big Red Button</Button>
<!-- "round" affects iOS theme only -->
<Button round color="green">Round Green Button</Button>
<Button big round>Big Round Button</Button>
<!-- "fill" affects iOS theme only -->
<Button fill>Filled-Color Button</Button>
<!-- "raised" affects Material theme only -->
<Button raised>Raised Button</Button>
<Button big raised color="red">Big Red Raised Button</Button>
Renders to:
<a href="#" class="button button-big color-red">Big Red Button</a>
<!-- "round" affects iOS theme only -->
<a href="#" class="button button-round color-green">Round Green Button</a>
<a href="#" class="button button-round button-big">Big Round Button</a>
<!-- "fill" affects iOS theme only -->
<a href="#" class="button button-fill">Filled-Color Button</a>
<!-- "raised" affects Material theme only -->
<a href="#" class="button button-raised">Raised Button</a>
<a href="#" class="button button-big button-raised color-red">Big Red Raised Button</a>
Button component has almost the same properties as the Link component but with few additional button-specific properties:
Prop | Type | Default | Description |
---|---|---|---|
Button-specific Properties | |||
round | boolean | Makes button round. Affects iOS theme only | |
big | boolean | Makes big button | |
raised | boolean | Makes button raised. Affects Material theme only | |
fill | boolean | Makes button filled color. Affects iOS theme only | |
Links Properties | |||
noLinkClass | boolean | Removes "link" class | |
color | string | Link color. One of default colors | |
rippleColor | string | Link Touch-ripple color (affects only Material theme). One of default colors | |
theme | string | Link color theme. One of default colors | |
bg | string | Link background color. One of default colors | |
text | string | Link text | |
Control Links | |||
tabLink | string/boolean | Enables tab link and specify CSS selector of the target tab (if specified as a string) | |
openPanel | string/boolean | Defines panel to open. Can be "left" or "right" | |
closePanel | boolean | Closes panel on click | |
openPopup | string/boolean | CSS selector of the popup to open on click | |
closePopup | string/boolean | CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
openPopover | string/boolean | CSS selector of the popover to open on click | |
closePopover | string/boolean | CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
openPicker | string/boolean | CSS selector of the picker to open on click | |
closePicker | string/boolean | CSS selector of the picker to close on click. Or boolean property to close currently opened picker | |
openLoginScreen | string/boolean | CSS selector of the login screen to open on click | |
closeLoginScreen | string/boolean | CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
openSortable | string/boolean | CSS selector of the Sortable list to open on click | |
closeSortable | string/boolean | CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list | |
toggleSortable | string/boolean | CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list | |
Navigation / Router Properties | |||
href | string | # | URL of the page to load |
view | string | CSS selector of the View to load the page | |
noFastClick | boolean | Disables fast click | |
external | boolean | Enable to bypass Framework7's link click handler | |
back | boolean | Enables back navigation link | |
force | boolean | Force page to load and ignore previous page in history (use together with back prop) | |
reload | boolean | Reloads new page instead of the currently active one | |
animatePages | boolean | Disables pages animation | |
ignoreCache | boolean | Ignores caching | |
pageName | string | Name of the page to load | |
template | string | Template name to load | |
routeTabLink | string | Used for tab routes. Connects the button to a tab with the same value in its routeTabId so that when the tab is active, the button appears as active too |
|
Icon Properties | |||
iconSize | string/number | Icon size in px | |
icon | string | Custom icon class | |
iconF7 | string | Name of F7 Icons font icon | |
iconMaterial | string | Name of Material Icons font icon | |
iconFa | string | Name of Font Awesome font icon | |
iconIon | string | Name of Ionicons font icon | |
iconIfIos | string | Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:home or ion:home |
|
iconIfMaterial | string | Icon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home |