Button

Framework7 comes with a bunch of ready to use buttons. All you need to do is add the appropriate classes to your links or submit/button inputs:

Button Layout

Button layout is pretty simple. Just add button class to links or submit/button inputs:

<!-- link as button -->
<a class="button">Button</a>

<!-- <button> as button -->
<button class="button">Button</button>

<!-- <input type="submit"> as button -->
<input type="submit" class="button" value="Button">

Button Modifier Classes

There is a variety of different buttons in Framework7. Different button styles achieved by additional modifier classes and their combinations:

button-fillFilled-style button
button-fill-iosButton will have filled-style only in iOS theme
button-fill-mdButton will have filled-style only in MD theme
button-fill-auroraButton will have filled-style only in Aurora theme
button-roundRounded button
button-round-iosButton will be rounded only in iOS theme
button-round-mdButton will be rounded only in MD theme
button-round-auroraButton will be rounded only in Aurora theme
button-smallSmall button
button-small-iosButton will be small only in iOS theme
button-small-mdButton will be small only in MD theme
button-small-auroraButton will be small only in Aurora theme
button-largeLarge button
button-large-iosButton will be large only in iOS theme
button-large-mdButton will be large only in MD theme
button-large-auroraButton will be large only in Aurora theme
button-raisedRaised button
button-raised-iosRaised button in iOS theme only
button-raised-mdRaised button in MD theme only
button-raised-auroraRaised button in Aurora theme only
button-outlineOutline button
button-outline-iosOutline button in iOS theme only
button-outline-mdOutline button in MD theme only
button-outline-auroraOutline button in Aurora theme only
button-activeActive/selected button state. For use inside of Segmented
button-preloaderShould be added to button with preloader to make loading buttons
button-loadingControls button state to show/hide preloader and hide/show button text (switch button to loading state). button-preloader should be also added to button
color-[color]Color button, where [color] is one of the default colors

And of course we can mix these classes:

<!-- rounded button -->
<a class="button button-round">Button</a>

<!-- rounded and filled button -->
<a class="button button-round button-fill">Button</a>

<!-- raised, round, fill, large button -->
<a class="button button-raised button-round button-fill button-large">Button</a>

<!-- small red button -->
<a class="button button-small color-red">Button</a>

Preloader Button

It is possible to create dynamic preloader button. Such button must have Preloader inside and button text wrapped with <span> tag, and additional button-preloader class:

<button class="button button-preloader">
  <span class="preloader"></span>
  <span>Load</span>
</button>

And to show preloader we need to add extra button-loading class (it will show inner preloader and hide button text):

<button class="button button-preloader button-loading">
  <span class="preloader"></span>
  <span>Load</span>
</button>

Segmented Control

A segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).

Segmented Layout

Segmented control layout is pretty simple, just a <div> with a segmented class around buttons:

<div class="segmented">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
</div>

Segmented "strong" requires additional element to correctly indicate active state:

<div class="segmented segmented-strong">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
  <!-- addition element required in segmented strong -->
  <span class="segmented-highlight"></span>
</div>

Segmented Modifier Classes

As well as buttons, segmented also supports few additional classes for styling:

segmented-roundRounded segmented
segmented-round-iosRounded segmented in iOS theme
segmented-round-mdRounded segmented in MD theme
segmented-round-auroraRounded segmented in Aurora theme
segmented-raisedRaised segmented
segmented-raised-iosRaised segmented in iOS theme
segmented-raised-mdRaised segmented in MD theme
segmented-raised-auroraRaised segmented in Aurora theme
segmented-strongStrong segmented
segmented-strong-iosStrong segmented in iOS theme
segmented-strong-mdStrong segmented in MD theme
segmented-strong-auroraStrong segmented in Aurora theme

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-button-font-size: 14px;
  --f7-button-min-width: 32px;
  --f7-button-bg-color: transparent;
  --f7-button-border-width: 0px;
  --f7-button-text-transform: uppercase;
  --f7-button-large-text-transform: uppercase;
  --f7-button-small-text-transform: uppercase;
  --f7-button-small-outline-border-width: 2px;
  /*
  --f7-button-text-color: var(--f7-theme-color);
  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-button-border-color: var(--f7-theme-color);
  --f7-button-fill-text-color: #fff;
  --f7-button-fill-bg-color: var(--f7-theme-color);
  --f7-button-outline-border-color: var(--f7-theme-color);
  --f7-button-padding-vertical: 0px;
  */
  --f7-button-outline-border-width: 2px;
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  --f7-segmented-strong-padding: 2px;
  --f7-segmented-strong-between-buttons: 4px;
  --f7-segmented-strong-button-font-weight: 500;
  --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --f7-segmented-strong-button-text-color: #000;
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
  --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  --f7-segmented-strong-button-active-text-color: #000;
  --f7-segmented-strong-button-active-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
  --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  --f7-segmented-strong-button-text-color: #fff;
  --f7-segmented-strong-button-active-text-color: #fff;
}
.ios {
  --f7-button-height: 28px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 5px;
  --f7-button-font-weight: 600;
  --f7-button-letter-spacing: 0;
  /*
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-button-large-height: 44px;
  --f7-button-large-font-size: 17px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-height: 26px;
  --f7-button-small-font-size: 13px;
  --f7-button-small-font-weight: 600;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 600;
}
.md {
  --f7-button-height: 36px;
  --f7-button-padding-horizontal: 8px;
  --f7-button-border-radius: 4px;
  --f7-button-font-weight: 500;
  --f7-button-letter-spacing: 0.05em;
  /*
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-button-large-height: 48px;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-height: 28px;
  --f7-button-small-font-size: 14px;
  --f7-button-small-font-weight: 500;
  --f7-segmented-strong-button-text-transform: uppercase;
  --f7-segmented-strong-button-active-font-weight: 500;
}
.aurora {
  /*
  --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  */
  --f7-button-height: 36px;
  --f7-button-min-width: 24px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 8px;
  --f7-button-font-weight: 600;
  --f7-button-letter-spacing: 0em;
  /*
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-button-large-height: 48px;
  --f7-button-large-font-size: 16px;
  --f7-button-large-font-weight: 600;
  --f7-button-small-height: 28px;
  --f7-button-small-font-size: 14px;
  --f7-button-small-font-weight: 600;
  --f7-segmented-strong-button-text-transform: uppercase;
  --f7-segmented-strong-button-active-font-weight: 600;
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Buttons</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Usual Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="button col">Button</button>
          <button class="button col">Button</button>
          <button class="button col button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Fill Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="col button button-fill">Button</button>
          <button class="col button button-fill">Button</button>
          <button class="col button button-fill button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Outline Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="col button button-outline">Button</button>
          <button class="col button button-outline">Button</button>
          <button class="col button button-outline button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Raised Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-raised">Button</button>
          <button class="col button button-raised button-fill">Fill</button>
          <button class="col button button-outline button-raised">Outline</button>
        </p>
        <p class="row">
          <button class="col button button-raised button-round">Round</button>
          <button class="col button button-raised button-fill button-round">Fill</button>
          <button class="col button button-outline button-round button-raised">Outline</button>
        </p>
      </div>
      <div class="block-title">Segmented</div>
      <div class="block block-strong">
        <p class="segmented segmented-raised">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
        </p>
        <p class="segmented segmented-strong">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
          <span class="segmented-highlight"></span>
        </p>
        <p class="segmented">
          <button class="button button-outline">Outline</button>
          <button class="button button-outline">Outline</button>
          <button class="button button-outline button-active">Active</button>
        </p>
        <p class="segmented segmented-raised segmented-round">
          <button class="button button-round">Button</button>
          <button class="button button-round">Button</button>
          <button class="button button-round button-active">Active</button>
        </p>
        <p class="segmented segmented-round">
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline button-active">Active</button>
        </p>
      </div>
      <div class="block-title">Large Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-large">Button</button>
          <button class="col button button-large button-fill">Fill</button>
        </p>
        <p class="row">
          <button class="col button button-large button-raised">Raised</button>
          <button class="col button button-large button-raised button-fill">Raised Fill</button>
        </p>
      </div>
      <div class="block-title">Small Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-small">Button</button>
          <button class="col button button-small button-outline">Outline</button>
          <button class="col button button-small button-fill">Fill</button>
        </p>
        <p class="row">
          <button class="col button button-small button-round">Button</button>
          <button class="col button button-small button-round button-outline">Outline</button>
          <button class="col button button-small button-round button-fill">Fill</button>
        </p>
      </div>
      <div class="block-title">Preloader Buttons</div>
      <div class="block block-strong">
        <button class="button button-large button-fill button-preloader ${isLoading ? 'button-loading' : ''}"
          @click=${load}>
          <span class="preloader"></span>
          <span>Load</span>
        </button>
      </div>
      <div class="block-title">Color Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button color-red">Red</button>
          <button class="col button color-green">Green</button>
          <button class="col button color-blue">Blue</button>
        </p>
        <p class="row">
          <button class="col button color-pink">Pink</button>
          <button class="col button color-yellow">Yellow</button>
          <button class="col button color-orange">Orange</button>
        </p>
        <p class="row">
          <button class="col button color-gray">Gray</button>
          <button class="col button color-black">Black</button>
        </p>
      </div>
      <div class="block-title">Color Fill Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill color-red">Red</button>
          <button class="col button button-fill color-green">Green</button>
          <button class="col button button-fill color-blue">Blue</button>
        </p>
        <p class="row">
          <button class="col button button-fill color-pink">Pink</button>
          <button class="col button button-fill color-yellow">Yellow</button>
          <button class="col button button-fill color-orange">Orange</button>
        </p>
        <p class="row">
          <button class="col button button-fill color-gray">Gray</button>
          <button class="col button button-fill color-black">Black</button>
          <button class="col button button-fill color-white text-color-black">White</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let isLoading = false;

    const load = () => {
      isLoading = true;
      $update();
      setTimeout(() => {
        isLoading = false;
        $update();
      }, 3000);
    }

    return $render;
  }
</script>