General information

The .button class is required to apply a very basic button style, and it can be used on:

• <button> elements

• <a> anchor tags

• <input> elements that are meant to look like buttons (e.g. <input type="submit">)

<button class="button">Button</button>
<a class="button" href="#">Anchor</a>
<input class="button" type="submit" value="Submit">

For React and Vue templates we have provided a button component that can be used as shown in the example below.

The button component returns a <button> element by default. You need to set a tag prop in order to output an anchor link (tag="a") or an input (tag="input").

<Button>Button</Button>
<Button tag="a" href="#">Anchor</Button>
<Button tag="input" type="submit" value="Submit" />

<c-button>Button</c-button>
<c-button tag="a" href="#">Anchor</c-button>
<c-button tag="input" type="submit" value="Submit" />

Colors

Each template comes with buttons in 4 different colors, inherited from the color palette.

By default, a button has a white background color unless you add a specific modifier class to change that.

<button class="button">White color</button>
<button class="button button-primary">Primary color</button>
<button class="button button-secondary">Secondary color</button>
<button class="button button-dark">Dark color</button>

In React and Vue you can use the color prop instead 👇

<Button>White color</Button>
<Button color="primary">Primary color</Button>
<Button color="secondary">Secondary color</Button>
<Button color="dark">Dark color</Button>

<c-button>White color</c-button>
<c-button color="primary">Primary color</c-button>
<c-button color="secondary">Secondary color</c-button>
<c-button color="dark">Dark color</c-button>

Sizes

Buttons come in 2 sizes. Add a .button-sm class to make a button look smaller.

<button class="button">Button</button>
<button class="button button-sm">Button</button>

Use the size prop in React and Vue 👇

<Button>Button</Button>
<Button size="sm">Button</Button>

<c-button>Button</c-button>
<c-button size="sm">Button</c-button>

Loading state

When waiting for a response from the server (for example, right after sending an AJAX request), you might want to hide the button inner text and display a spinner.

It can be displayed by adding the .is-loading class. The button will keep its original size and you don't need to hide or remove the inner text.

<button class="button is-loading">Click me!</button>

In React and Vue you can use the boolean loading prop.

<Button loading>Click me!</Button>

<c-button loading>Click me!</c-button>

Disabled state

To prevent users from interacting with a button, just use the disabled HTML attribute.

<button class="button" disabled>Button</button>

It will be passed as a prop in React and Vue.

<Button disabled>Button</Button>

<c-button disabled>Button</c-button>

Other modifiers

• .button-block makes a button fit the width of its container

• .button-wide-mobile can be used to make a button look larger on smaller screens

<button class="button button-block">Full width button</button>
<button class="button button-wide-mobile">Wider on mobile</button>

And, as you can guess... 👇

<Button wide>Full width button</Button>
<Button wideMobile>A little wider on mobile</Button>

<c-button wide>Full width button</c-button>
<c-button wide-mobile>A little wider on mobile</c-button>

Button group

If you wish to group buttons on a single line, wrap them in a tag with a .button-group class. You won't need to worry about spacing between buttons.

<div class="button-group">
    <button class="button button-primary">Primary</button>
    <button class="button button-secondary">Secondary</button>
</div>

We have included a React and Vue component for such a wrapper as well 👇

<ButtonGroup>
  <Button color="primary">Primary</Button>
  <Button color="secondary">Secondary</Button>
</ButtonGroup>

<c-button-group>
  <c-button color="primary">Primary</c-button>
  <c-button color="secondary">Secondary</c-button>
</c-button-group>

Button link

This is more a helper class than a button, and it can be helpful if you want to display a link for a secondary action right after a button. Add the .button-link class to the link and wrap both elements in a .button-group like this👇

<div class="button-group">
    <button class="button button-primary">Save</button>
    <a class="button-link text-xs">Cancel</a>
</div>

TL;DR

List of available HTML classes

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_buttons.scss

👆🚫 Don't edit this file!

📋 Settings file

src/assets/scss/settings/elements/_buttons-and-forms.scss

👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_buttons.scss

👆Use this to add custom CSS