Language: ENCN

Button Vue Component

Button Vue component represents Framework7's Buttons elements.

Usage examples

<f7-button>Button Text</f7-button>

Renders to:

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

Buttons Row / Segmented Controller

<f7-buttons>
  <f7-button>Button 1</f7-button>
  <f7-button>Button 2</f7-button>
  <f7-button>Button 3</f7-button>
</f7-buttons>

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 -->
<f7-tabs>
  <f7-tab id="tab-1" active>Tab 1</f7-tab>
  <f7-tab id="tab-1">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-buttons>
  <f7-button tab-link="#tab-1" active>Button 1</f7-button>
  <f7-button tab-link="#tab-2">Button 2</f7-button>
</f7-buttons>

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>

Colors

<f7-button color="red">Red Button</f7-button>
<f7-button color="green">Green Button</f7-button>

<f7-buttons theme="orange">
  <f7-button active>Button 1</f7-button>
  <f7-button>Button 2</f7-button>
  <f7-button>Button 3</f7-button>
</f7-buttons>

<!-- With custom Touch-Ripple color, affects Material theme only -->
<f7-button ripple-color="yellow">Yellow-ripple Button</f7-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

<f7-button big color="red">Big Red Button</f7-button>

<!-- "round" affects iOS theme only -->
<f7-button round color="green">Round Green Button</f7-button>
<f7-button big round>Big Round Button</f7-button>

<!-- "fill" affects iOS theme only -->
<f7-button fill>Filled-Color Button</f7-button>

<!-- "raised" affects Material theme only  -->
<f7-button raised>Raised Button</f7-button>
<f7-button big raised color="red">Big Red Raised Button</f7-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
no-link-class boolean Removes "link" class
color string Link color. One of default colors
ripple-color 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
tab-link string/boolean Enables tab link and specify CSS selector of the target tab (if specified as a string)
open-panel string/boolean Defines panel to open. Can be "left" or "right"
close-panel boolean Closes panel on click
open-popup string/boolean CSS selector of the popup to open on click
close-popup string/boolean CSS selector of the popup to close on click. Or boolean property to close currently opened popup
open-popover string/boolean CSS selector of the popover to open on click
close-popover string/boolean CSS selector of the popover to close on click. Or boolean property to close currently opened popover
open-picker string/boolean CSS selector of the picker to open on click
close-picker string/boolean CSS selector of the picker to close on click. Or boolean property to close currently opened picker
open-login-screen string/boolean CSS selector of the login screen to open on click
close-login-screen string/boolean CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
open-sortable string/boolean CSS selector of the Sortable list to open on click
close-sortable string/boolean CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
toggle-sortable 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
no-fast-click 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
animate-pages boolean Disables pages animation
ignore-cache boolean Ignores caching
page-name string Name of the page to load
template string Template name to load
Icon Properties
icon-size string/number Icon size in px
icon string Custom icon class
icon-f7 string Name of F7 Icons font icon
icon-material string Name of Material Icons font icon
icon-fa string Name of Font Awesome font icon
icon-ion string Name of Ionicons font icon
icon-if-ios 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
icon-if-material 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