Button Vue Component

Button Vue component represents Framework7's Button elements.

Button Components

There are following components included:

f7-button - single button

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-button> properties
type	string		If it is one of `submit`, `button` or `reset` then it will be rendered as `<button>` element with same `type` attribute
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
tooltip	string		Button tooltip text to show on button hover/press
tooltip-trigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover`, `click` or `manual`
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
large	boolean	false	Makes large button
large-ios	boolean	false	Makes large button for iOS theme only
large-md	boolean	false	Makes large 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
tonal	boolean	false	Makes tonal style button
tonal-ios	boolean	false	Makes tonal style button for iOS theme only
tonal-md	boolean	false	Makes tonal style button for MD theme only
raised	boolean	false	Makes button raised
raised-ios	boolean	false	Makes button raised only in iOS theme
raised-md	boolean	false	Makes button raised only in MD theme
outline	boolean	false	Makes button outline
outline-ios	boolean	false	Makes button outline only in iOS theme
outline-md	boolean	false	Makes button outline only in MD theme
<Button> preloader related properties
preloader	boolean	false	Enables button to have preloader
loading	boolean	false	Controls button state to show/hide preloader and hide/show button text (switch button to loading state)
preloader-color	string		button's preloader color
preloader-size	number string		button's preloader size
<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-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:house`
icon-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`
<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
target	string		Value of link target attribute, e.g. `_blank`, `_self`, etc.
view	string		CSS selector of the View to load the page. Or `current` to load in current view.
external	boolean		Enable to bypass Framework7's link click handler
back	boolean		Enables back navigation link
open-in	string		Allows open page route as modal or panel. Can be `popup`, `loginScreen`, `sheet`, `popover` or `panel`
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
reload-detail	boolean		Reload Detail page in Master Detail view
animate	boolean		Disables pages animation
transition	string		Name of the custom page transition
ignore-cache	boolean		Ignores caching
route-tab-id	string		Routable Tab id
route-props	object		Object with additional props that will be passed to target route component
prevent-router	boolean	false	If set, then it won't be processed by Framework7 router
<f7-button> action related properties
panel-open	string boolean		CSS selector of panel to open on click. Or can be `left` or `right` if there is only left or right panel in DOM.
panel-close	string boolean		Closes panel on click
panel-toggle	string boolean		CSS selector of panel to toggle on click. Or can be `left` or `right` if there is only left or right panel in DOM.
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 be enabled on click
sortable-disable	string boolean		CSS selector of the Sortable list to be disabled 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
searchbar-enable	string boolean		CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar
searchbar-disable	string boolean		CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar
searchbar-toggle	string boolean		CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar
searchbar-clear	string boolean		CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar
card-open	string boolean		CSS selector of the expandable card to open on click. Or boolean to open first found expandable card
card-close	string boolean		CSS selector of the expandable card to close on click. Or boolean property to close currently opened expandable card
card-prevent-open	boolean		Click on element with this prop won't open its parent expandable card

Button Events

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

Examples

buttons.vue

<template>
  <f7-page>
    <f7-navbar title="Buttons"></f7-navbar>

    <f7-block-title>Usual Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button>Button</f7-button>
        <f7-button>Button</f7-button>
        <f7-button round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Tonal Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button tonal>Button</f7-button>
        <f7-button tonal>Button</f7-button>
        <f7-button tonal round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Fill Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button fill>Button</f7-button>
        <f7-button fill>Button</f7-button>
        <f7-button fill round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Outline Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button outline>Button</f7-button>
        <f7-button outline>Button</f7-button>
        <f7-button outline round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Raised Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button raised>Button</f7-button>
        <f7-button raised fill>Fill</f7-button>
        <f7-button raised outline>Outline</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button raised round>Round</f7-button>
        <f7-button raised fill round>Fill</f7-button>
        <f7-button raised outline round>Outline</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Large Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button large>Button</f7-button>
        <f7-button large fill>Fill</f7-button>
      </p>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button large raised>Raised</f7-button>
        <f7-button large raised fill>Raised Fill</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Small Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button small>Button</f7-button>
        <f7-button small outline>Outline</f7-button>
        <f7-button small fill>Fill</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button small round>Button</f7-button>
        <f7-button small outline round>Outline</f7-button>
        <f7-button small fill round>Fill</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Preloader Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button preloader :loading="isLoading1" large @click="load1"> Load </f7-button>
        <f7-button preloader :loading="isLoading2" large fill @click="load2"> Load </f7-button>
      </p>
    </f7-block>

    <f7-block-title>Color Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button color="red">Red</f7-button>
        <f7-button color="green">Green</f7-button>
        <f7-button color="blue">Blue</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Color Fill Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="red">Red</f7-button>
        <f7-button color="green">Green</f7-button>
        <f7-button color="blue">Blue</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="pink">Pink</f7-button>
        <f7-button color="yellow">Yellow</f7-button>
        <f7-button color="orange">Orange</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="black">Black</f7-button>
        <f7-button color="white">White</f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { ref } from 'vue';
import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Button } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7Button,
  },
  setup() {
    const isLoading1 = ref(false);
    const isLoading2 = ref(false);

    const load1 = () => {
      if (isLoading1.value) return;
      isLoading1.value = true;
      setTimeout(() => {
        isLoading1.value = false;
      }, 4000);
    };

    const load2 = () => {
      if (isLoading2.value) return;
      isLoading2.value = true;
      setTimeout(() => {
        isLoading2.value = false;
      }, 4000);
    };

    return {
      isLoading1,
      isLoading2,
      load1,
      load2,
    };
  },
};
</script>

Improve this Doc

On this page

Button Components
Button Properties
Button Events
Examples