Framework7 v2
Support Framework7
stars forks
Improve this Doc

Button Vue Component

Button Vue component represents Framework7's Button elements.

Button Components

There are following components included:

  • f7-button - single button
  • f7-segmented - segmented wrapper for buttons

Button Properties

Button component has almost the same properties as the Link component but with few additional button-specific properties:

Prop Type Default Description
<f7-segmented> properties
raised boolean false Makes segmented raised. Affects MD theme only
round boolean false Makes segmented round
tag string div Tag used to render Segmented element
<f7-button> properties
tab-link string
boolean		 Enables tab link and specify CSS selector of the target tab (if specified as a string)
tab-link-active boolean false Makes this tab link active
active boolean false Makes this button active state when used in Segmented. Must be used instead of tab-link-active
text string Button text label
no-fast-click boolean Disables fast click
round boolean false Makes button round
round-ios boolean false Makes button round for iOS theme only
round-md boolean false Makes button round for MD theme only
big boolean false Makes big button
big-ios boolean false Makes big button for iOS theme only
big-md boolean false Makes big button for MD theme only
small boolean false Makes small button
small-ios boolean false Makes small button for iOS theme only
small-md boolean false Makes small button for MD theme only
fill boolean false Makes button filled color
fill-ios boolean false Makes button filled color for iOS theme only
fill-md boolean false Makes button filled color for MD theme only
raised boolean false Makes button raised. Affects MD theme only
outline boolean false Makes button outline. Affects MD theme only
<f7-button> icon related properties
icon-size string
number		 Icon size in px
icon-color string Icon color. One of the default colors
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-md string Icon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home
<f7-button> navigation/router related properties
href string
boolean		 # URL of the page to load. In case of boolean href="false" it won't add href tag
view string CSS selector of the View to load the page
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-current boolean Reloads new page instead of the currently active one
reload-previous boolean Replace the previous page in history with the new one from route
reload-all boolean Load new page and remove all previous pages from history and DOM
animate boolean Disables pages animation
ignore-cache boolean Ignores caching
page-name string Name of the page to load
route-tab-id string Routable Tab id
<f7-button> action related properties
panel-open string
boolean		 Defines panel to open. Can be left or right
panel-close boolean Closes panel on click
actions-open string
boolean		 CSS selector of the action sheet to open on click
actions-close string
boolean		 CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet
popup-open string
boolean		 CSS selector of the popup to open on click
popup-close string
boolean		 CSS selector of the popup to close on click. Or boolean property to close currently opened popup
popover-open string
boolean		 CSS selector of the popover to open on click
popover-close string
boolean		 CSS selector of the popover to close on click. Or boolean property to close currently opened popover
sheet-open string
boolean		 CSS selector of the sheet modal to open on click
sheet-close string
boolean		 CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal
login-screen-open string
boolean		 CSS selector of the login screen to open on click
login-screen-close string
boolean		 CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
sortable-enable string
boolean		 CSS selector of the Sortable list to open on click
sortable-disable string
boolean		 CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
sortable-toggle string
boolean		 CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list

Button Events

Event Description
<f7-button> events
click Event will be triggered after click on a button

Examples

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

<!-- Renders to: -->

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

Segmented Controller

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

<!-- Renders to: -->

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

<!-- Renders to: -->

<!-- Tabs -->
<div class="tabs">
  <div class="tab tab-active" id="tab-1">Tab 1</div>
  <div class="tab" id="tab-2">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<div class="segmented">
  <a href="#" data-tab="#tab-1" class="button tab-link tab-link-active">Button 1</a>
  <a href="#" data-tab="#tab-2" class="button tab-link">Button 2</a>
</div>

Routable Tabs

<!-- Tabs -->
<f7-tabs routable>
  <f7-tab id="tab-1"></f7-tab>
  <f7-tab id="tab-2"></f7-tab>
</f7-tabs>

<f7-segmented>
  <f7-button route-tab-id="#tab-1" tab-link href="/tabs/">Button 1</f7-button>
  <f7-button route-tab-id="#tab-2" tab-link href="/tabs/tab-2/">Button 2</f7-button>
</f7-segmented>

<!-- Renders to: -->

<!-- Tabs -->
<div class="tabs tabs-routable">
  <div class="tab" id="tab-1"></div>
  <div class="tab" id="tab-2"></div>
</div>

<div class="segmented">
  <a href="/tabs/" data-route-tab-id="#tab-1" class="button tab-link">Button 1</a>
  <a href="/tabs/tab-2/" data-route-tab-id="#tab-2" class="button tab-link">Button 2</a>
</div>

Colors

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

<f7-segmented color="orange">
  <f7-button active>Button 1</f7-button>
  <f7-button>Button 2</f7-button>
  <f7-button>Button 3</f7-button>
</f7-segmented>

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

Round/Fill/Raised/Big

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

<f7-button round color="green">Round Green Button</f7-button>
<f7-button big round>Big Round Button</f7-button>

<f7-button fill>Filled-Color Button</f7-button>

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