Buttons

Use the buttons on any mobile and desktop form or page. The buttons come with several rendering modes and styles. Use it as:

  • fluid-width buttons (the buttons grow with their content)
  • justified
  • full width buttons

Icon support is built in along with three different styles:

  • filled buttons
  • flat buttons
  • outlined buttons
Customize the look & feel:  See how to apply color presets →
Get started with this example

Demo

Javascript jQuery Angular React Vue 
const actionToast = () => {
    toast({
        message: 'Button was clicked',
    });
}

<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Buttons</div>
    <div className="mbsc-button-group">
        <Button>Button</Button>
        <Button disabled>Disabled</Button>
    </div>
    <div className="mbsc-button-group">
        <Button onClick={actionToast}>Click for action</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Full width buttons</div>
    <div className="mbsc-button-group-block">
        <Button>Full width button</Button>
        <Button disabled>Disabled full width</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Justified buttons</div>
    <div className="mbsc-button-group-justified">
        <Button>Tag</Button>
        <Button>Favorite</Button>
        <Button>Flag</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Icons</div>
    <div className="mbsc-button-group">
        <Button icon="tag"></Button>
        <Button icon="heart"></Button>
        <Button icon="flag" disabled></Button>
    </div>
    <div className="mbsc-button-group">
        <Button startIcon="tag">Tag</Button>
        <Button startIcon="heart">Favorite</Button>
        <Button startIcon="flag" disabled>Flag</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Flat buttons</div>
    <div className="mbsc-button-group">
        <Button variant="flat">Flat</Button>
        <Button variant="flat" startIcon="arrow-left5">Flat & Icon</Button>
        <Button variant="flat" icon="arrow-left5"></Button>
        <Button variant="flat" icon="key2" disabled></Button>
        <Button variant="flat" disabled>Flat disabled</Button>
    </div>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Outline buttons</div>
    <div className="mbsc-button-group">
        <Button variant="outline">Outline</Button>
        <Button variant="outline" startIcon="arrow-left5">Outline & Icon</Button>
        <Button variant="outline" icon="arrow-left5"></Button>
        <Button variant="outline" icon="key2" disabled></Button>
        <Button variant="outline" disabled>Outline disabled</Button>
    </div>
</div>
Buttons
Full width buttons
Justified buttons
Icons
Flat buttons
Outline buttons
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.