Get Started
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

Button React Component

Button React component represents Framework7's Buttons elements.

Usage examples

<Button>Button Text</Button>

Renders to:

<a href="#" class="button">Button Text</a>

Buttons Row / Segmented Controller

<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>

Tab Links

<!-- 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>

Route Tab Links

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>

Colors

<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>

Round/Fill/Raised/Big

<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>

Properties

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`