✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Button

Cruip CSS

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">)

Buttons

<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 colors

<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 sizes

<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 loading state

<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.

Disabled button

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

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

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

Other button modifiers

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.

Grouped 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 group components have no props and only return a <div class="button-group"></div> wrapper for multiple buttons.

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 👇

Button link

<div class="button-group">
    <button class="button button-primary">Save</button>
    <a class="button-link text-xs">Cancel</a>
</div>
In the example above we are using the .text-xs helper class to make the link a little smaller. Go to the Helper classes chapter to learn more.
There is no React or Vue component available for button links. Just use that class on your anchor tag.

TL;DR

List of available HTML classes

Class Description
.button Required to make an element look like a button
.button-primary .button-secondary .button-dark To set the background color different than the default white
.button-sm To make a button smaller
.is-loading To display a loading spinner in place of text
.button-block To make a button full-width
.button-wide-mobile To make a button a little wider on mobile only
.button-link Helper class to be used for secondary action right after a button.
Use it without the .button class.

React props

Prop Type Default Accepted values
tag string button button, a, input
color string primary, secondary, dark
size string sm
loading boolean false
disabled boolean false
wide boolean false
wideMobile boolean false

Vue props

Prop Type Default Accepted values
tag string button button, a, input
color string primary, secondary, dark
size string sm
loading boolean false
disabled boolean false
wide boolean false
wide-mobile boolean false

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

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021