Button Vue Component

Button Components
Button Properties
Button Events
Examples

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
raised-ios	boolean	false	Makes segmented raised only in iOS theme
raised-md	boolean	false	Makes segmented raised only in MD theme
raised-aurora	boolean	false	Makes segmented raised only in Aurora theme
round	boolean	false	Makes segmented round
round-ios	boolean	false	Makes segmented round only in iOS theme
round-md	boolean	false	Makes segmented round only in MD theme
round-aurora	boolean	false	Makes segmented round only in Aurora theme
strong	boolean	false	Makes strong segmented
strong-ios	boolean	false	Makes strong segmented only in iOS theme
strong-md	boolean	false	Makes strong segmented only in MD theme
strong-aurora	boolean	false	Makes strong segmented only in Aurora theme
tag	string	div	Tag used to render Segmented element
<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
round-aurora	boolean	false	Makes button round for Aurora 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
large-aurora	boolean	false	Makes large button for Aurora 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
small-aurora	boolean	false	Makes small button for Aurora 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
fill-aurora	boolean	false	Makes button filled color for Aurora 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
raised-aurora	boolean	false	Makes button raised only in Aurora 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
outline-aurora	boolean	false	Makes button outline only in Aurora 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`
icon-aurora	string		Icon to be used in case of Aurora 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
menu-close	boolean		Closes Menu dropdown on click

Button Events

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

Examples

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

  <f7-block-title>Usual Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button round>Round</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Fill Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button fill>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill round>Round</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Outline Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button outline>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button outline>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button outline round>Round</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Raised Buttons</f7-block-title>
  <f7-block strong>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button raised>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised fill>Fill</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised outline>Outline</f7-button>
      </f7-col>
    </f7-row>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button raised round>Round</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised fill round>Fill</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised outline round>Outline</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Segmented</f7-block-title>
  <f7-block strong>
    <f7-segmented raised tag="p">
      <f7-button>Button</f7-button>
      <f7-button>Button</f7-button>
      <f7-button active>Active</f7-button>
    </f7-segmented>
    <f7-segmented strong tag="p">
      <f7-button>Button</f7-button>
      <f7-button>Button</f7-button>
      <f7-button active>Active</f7-button>
    </f7-segmented>
    <f7-segmented tag="p">
      <f7-button outline>Outline</f7-button>
      <f7-button outline>Outline</f7-button>
      <f7-button outline active>Active</f7-button>
    </f7-segmented>
    <f7-segmented raised round tag="p">
      <f7-button round>Button</f7-button>
      <f7-button round>Button</f7-button>
      <f7-button round active>Active</f7-button>
    </f7-segmented>
    <f7-segmented round tag="p">
      <f7-button round outline>Outline</f7-button>
      <f7-button round outline>Outline</f7-button>
      <f7-button round outline active>Active</f7-button>
    </f7-segmented>
  </f7-block>

  <f7-block-title>Large Buttons</f7-block-title>
  <f7-block strong>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large fill>Fill</f7-button>
      </f7-col>
    </f7-row>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large raised>Raised</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large raised fill>Raised Fill</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Small Buttons</f7-block-title>
  <f7-block strong>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large small>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small outline>Outline</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small fill>Fill</f7-button>
      </f7-col>
    </f7-row>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large small round>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small outline round>Outline</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small fill round>Fill</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Preloader Button</f7-block-title>
  <f7-block strong>
    <f7-button fill preloader :loading="isLoading" @click="load"> Load </f7-button>
  </f7-block>

  <f7-block-title>Color Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button color="red">Red</f7-button>
      </f7-col>
      <f7-col>
        <f7-button color="green">Green</f7-button>
      </f7-col>
      <f7-col>
        <f7-button color="blue">Blue</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Color Fill Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button fill color="red">Red</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill color="green">Green</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill color="blue">Blue</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>
</f7-page>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isLoading = ref(false);
    const load = () => {
      if (isLoading.value) return;
      isLoading.value = true;
      setTimeout(() => {
        isLoading.value = false;
      }, 4000);
    };

    return {
      isLoading,
      load,
    };
  },
};
</script>