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-fill Filled-style button
    button-fill-ios Button will have filled-style only in iOS theme
    button-fill-md Button will have filled-style only in MD theme
    button-round Rounded button
    button-round-ios Button will be rounded only in iOS theme
    button-round-md Button will be rounded only in MD theme
    button-small Small button
    button-small-ios Button will be small only in iOS theme
    button-small-md Button will be small only in MD theme
    button-big Big button
    button-big-ios Button will be big only in iOS theme
    button-big-md Button will be big only in MD theme
    button-raised Raised button This will have effect only in MD theme
    button-outline Outline button This will have effect only in MD theme
    button-active Active/selected button state. For use inside of Segmented
    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, big button -->
    <a class="button button-round button-fill button-raised button-fill">Button</a>
    
    <!-- small red button -->
    <a class="button button-small color-red">Button</a>

    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 Modifier Classes

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

    segmented-round Rounded segmented
    segmented-raised Raised segmented  This will have effect only in MD theme

    Examples

    Usual Buttons

    Add button class.

    <div class="block">
      <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>

    Fill Buttons

    Add button-fill class.

    <div class="block">
      <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>

    Outline Buttons

    Add button-outline class.

    <div class="block">
      <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>

    Raised Buttons

    Add button-raised class.

    <div class="block">
      <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>

    Segmented Buttons

    Put buttons inside of segmented

    <div class="block">
      <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">
        <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>

    Big Buttons

    Add button-big class.

    <div class="block">
      <p class="row">
        <button class="col button button-big">Button</button>
        <button class="col button button-big button-fill">Fill</button>
      </p>
      <p class="row">
        <button class="col button button-big button-raised">Raised</button>
        <button class="col button button-big button-raised button-fill">Raised Fill</button>
      </p>
    </div>

    Small Buttons

    Add button-small class.

    <div class="block">
      <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>

    Color Buttons

    Add color-[color] class. Where [color] is one of the default colors.

    <div class="block">
      <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>

    Color Fill Buttons

    Add button-fill and color-[color] class. Where [color] is one of the default colors.

    <div class="block">
      <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>