Button

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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

React
Vue
React
<Button>Button</Button>
<Button tag="a" href="#">Anchor</Button>
<Button tag="input" type="submit" value="Submit" />
Vue
<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 πŸ‘‡

React
Vue
React
<Button>White color</Button>
<Button color="primary">Primary color</Button>
<Button color="secondary">Secondary color</Button>
<Button color="dark">Dark color</Button>
Vue
<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 πŸ‘‡

React
Vue
React
<Button>Button</Button>
<Button size="sm">Button</Button>
Vue
<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.

React
Vue
React
<Button loading>Click me!</Button>
Vue
<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.

React
Vue
React
<Button disabled>Button</Button>
Vue
<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... πŸ‘‡

React
Vue
React
<Button wide>Full width button</Button>
<Button wideMobile>A little wider on mobile</Button>
Vue
<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 πŸ‘‡

React
Vue
React
<ButtonGroup>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
</ButtonGroup>
Vue
<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.

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>

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.