Button | Buval

Button

The classic button, in different colors, sizes, and states

The button is an essential element of any design. It's meant to look and behave as an interactive element of your page.

The button class can be used on:

<a> anchor links
<button> form buttons
<input type="submit"> submit inputs
<input type="reset"> reset inputs

Link

<a class="button">Link</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

Colors

The button is available in all the different colors defined by the $colors Sass map.

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
        
        
<button class="button is-primary">Primary</button>
<button class="button is-primary is-light">Primary Light</button>
<button class="button is-mix">Mix</button>
<button class="button is-mix is-light">Mix Light</button>
        
        
<button class="button is-info">Info</button>
<button class="button is-info is-light">Info Light</button>
<button class="button is-success">Success</button>
<button class="button is-success is-light">Success Light</button>
<button class="button is-warning">Warning</button>
<button class="button is-warning is-light">Warning Light</button>
<button class="button is-danger">Danger</button>
<button class="button is-danger is-light">Danger Light</button>

Sizes

The button comes in 4 different sizes:

small
normal
medium
large

While the default size is the normal one, the is-normal modifier exists in case you need to reset the button to its normal size.

<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

You can change the size of multiple buttons at once by wrapping them in a buttons parent, and applying one of 3 modifiers:

buttons are-small
buttons are-medium
buttons are-large

#2: You can change the size of only a subset of buttons by simply applying a modifier class to them.
For example, if you want all buttons to be small but still have one in its normal size, simply do the following:

<div class="buttons are-medium">
    <button class="button">All</button>
    <button class="button">Medium</button>
    <button class="button">Size</button>
</div>
#2
<div class="buttons are-small">
    <button class="button">Small</button>
    <button class="button">Small</button>
    <button class="button">Small</button>
    <button class="button is-normal">Normal</button>
    <button class="button">Small</button>
</div>

Displays

<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>

Styles

<div class="buttons">
    <button class="button is-rounded">Rounded</button>
    <button class="button is-outlined is-primary">Outlined</button>
</div>
<div class="notification is-primary">
    <button class="button is-primary is-inverted">Inverted</button>
    <button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
</div>

States

Bulma styles the different states of its buttons. Each state is available as a pseudo-class and a CSS class:

:hover and is-hovered
:focus and is-focused
:active and is-active

This allows you to obtain the style of a certain state without having to trigger it.

Static

<button class="button is-primary">Normal</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-primary is-loading">Loading</button>
<span class="button is-static">Static</span>
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>

Icons

For the best results, wrap the inner text in a separate <span> element.

<button class="button">
    <span class="icon is-small">
        <i class="fas fa-bold"></i>
    </span>
</button>
<button class="button">
    <span class="icon is-small">
        <i class="fas fa-italic"></i>
    </span>
</button>
<button class="button">
    <span class="icon is-small">
        <i class="fas fa-underline"></i>
    </span>
</button>
        

        
<button class="button">
    <span class="icon">
        <i class="fab fa-instagram"></i>
    </span>
    <span>@mickorj</span>
</button>
<button class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
        <i class="fas fa-times"></i>
    </span>
</button>
        

        
<button class="button is-small">
    <span class="icon is-small">
        <i class="fab fa-gitlab"></i>
    </span>
    <span>Gitlab</span>
</button>
<button class="button">
    <span class="icon">
        <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
</button>
<button class="button is-medium">
    <span class="icon">
        <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
</button>
<button class="button is-large">
    <span class="icon is-medium">
        <i class="fab fa-gitlab"></i>
    </span>
    <span>Gitlab</span>
</button>

Group and Addons

Note: for button group with addons, You can group together addons as well.

<div class="field is-grouped">
    <p class="control">
        <button class="button is-link">
            Save changes
        </button>
    </p>
    <p class="control">
        <button class="button">
            Cancel
        </button>
    </p>
    <p class="control">
        <button class="button is-danger">
            Delete post
        </button>
    </p>
</div>

<div class="field has-addons">
    <p class="control">
        <button class="button">
            <span class="icon is-small">
                <i class="fas fa-align-left"></i>
            </span>
            <span>Left</span>
        </button>
    </p>
    <p class="control">
        <button class="button">
            <span class="icon is-small">
                <i class="fas fa-align-center"></i>
            </span>
            <span>Center</span>
        </button>
    </p>
    <p class="control">
        <button class="button">
            <span class="icon is-small">
                <i class="fas fa-align-right"></i>
            </span>
            <span>Right</span>
        </button>
    </p>
</div>

List of buttons

You can create a list of buttons by using the buttons container.

If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.

You can attach buttons together with the has-addons modifier.

Use the is-centered or the is-right modifiers to alter the alignment.

You can use any modifier class on each button to differentiate them. Make sure to add the is-selected modifier as well to make sure the selected button is above its siblings.

<small>You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.</small>
<div class="buttons">
    <button class="button is-success">Save changes</button>
    <button class="button is-info">Save and continue</button>
    <button class="button is-danger">Cancel</button>
</div>

<small>If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.</small>
<div class="buttons">
    <button class="button">One</button>
    <button class="button">Two</button>
    <button class="button">Three</button>
    <button class="button">Four</button>
    <button class="button">Five</button>
    <button class="button">Six</button>
    <button class="button">Seven</button>
    <button class="button">Eight</button>
    <button class="button">Nine</button>
    <button class="button">Ten</button>
    <button class="button">Eleven</button>
    <button class="button">Twelve</button>
    <button class="button">Thirteen</button>
    <button class="button">Fourteen</button>
    <button class="button">Fifteen</button>
    <button class="button">Sixteen</button>
    <button class="button">Seventeen</button>
    <button class="button">Eighteen</button>
    <button class="button">Nineteen</button>
    <button class="button">Twenty</button>
</div>

<small>You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.</small>
<div class="buttons has-addons">
    <button class="button">Yes</button>
    <button class="button">Maybe</button>
    <button class="button">No</button>
</div>

<small>Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.</small>
<div class="buttons has-addons is-centered">
    <button class="button">Yes</button>
    <button class="button">Maybe</button>
    <button class="button">No</button>
</div>
<div class="buttons has-addons is-right">
    <button class="button">Yes</button>
    <button class="button">Maybe</button>
    <button class="button">No</button>
</div>

<small>You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.</small>
<div class="buttons has-addons">
    <button class="button is-success is-selected">Yes</button>
    <button class="button">Maybe</button>
    <button class="button">No</button>
</div>

<div class="buttons has-addons">
    <button class="button">Yes</button>
    <button class="button is-info is-selected">Maybe</button>
    <button class="button">No</button>
</div>

<div class="buttons has-addons">
    <button class="button">Yes</button>
    <button class="button">Maybe</button>
    <button class="button is-danger is-selected">No</button>
</div>

Difference between form groups and list of buttons

While this list of buttons style can be achieved with either field is-grouped or the new buttons class, there are a few differences:

buttons has a simpler markup
buttons can only contain button elements
field is-grouped can contain any type of control inputs
field is-grouped can be forced to fit all controls on a single line
with field is-grouped you can expand one of the controls

Basically, if you only want a list of buttons, using buttons is recommended. If you need more control on the styling and the elements, use a form group.

<template>
    <section>
        <b-button @click="clickMe">Click Me</b-button>
    </section>
</template>

<script>
    export default {
        methods: {
            clickMe() {
                this.$buval.notification.open('Clicked!!')
            }
        }
    }
</script>

Types and states

<template>
    <section>

        <div class="buttons">
            <b-button type="is-primary">Primary</b-button>
            <b-button type="is-primary is-light">Primary Light</b-button>

            <b-button type="is-mix">Mix</b-button>
            <b-button type="is-mix is-light">Mix Light</b-button>

            <b-button type="is-info">Info</b-button>
            <b-button type="is-info is-light">Info Light</b-button>

            <b-button type="is-success">Success</b-button>
            <b-button type="is-success is-light">Success Light</b-button>

            <b-button type="is-danger">Danger</b-button>
            <b-button type="is-danger is-light">Danger Light</b-button>

            <b-button type="is-warning">Warning</b-button>
            <b-button type="is-warning is-light">Warning Light</b-button>

            <b-button type="is-light">Light</b-button>

            <b-button type="is-dark">Dark</b-button>

            <b-button type="is-text">Text</b-button>
        </div>

        <div class="buttons">
            <b-button>Normal</b-button>
            <b-button disabled>Disabled</b-button>
            <b-button loading>Loading</b-button>
            <b-button rounded>Rounded</b-button>
            <b-button focused>Focused</b-button>
            <b-button hovered>Hovered</b-button>
            <b-button selected>Selected</b-button>
            <b-button active>Active</b-button>
        </div>

        <div class="buttons">
            <b-button type="is-primary" outlined>Outlined</b-button>
            <b-button type="is-success" outlined>Outlined</b-button>
            <b-button type="is-danger" outlined>Outlined</b-button>
            <b-button type="is-warning" outlined>Outlined</b-button>
        </div>

        <div class="buttons">
            <b-button type="is-primary" expanded>Expanded</b-button>
        </div>

        <div class="notification is-primary">
            <b-button type="is-primary"
                inverted>
                Inverted
            </b-button>

            <b-button type="is-primary"
                inverted
                outlined>
                Invert Outlined
            </b-button>
        </div>

    </section>
</template>

Sizes

<template>
    <section>
        <div class="buttons">
            <b-button size="is-small">Small</b-button>
            <b-button>Default</b-button>
            <b-button size="is-medium">Medium</b-button>
            <b-button size="is-large">Large</b-button>
        </div>
    </section>
</template>

Icons

<template>
    <section>
        <div class="buttons">
            <b-button
                size="is-small"
                icon-pack="fab"
                icon-left="gitlab">
                Add
            </b-button>

            <b-button
                icon-pack="fab"
                icon-left="gitlab">
                Add
            </b-button>

            <b-button
                size="is-medium"
                icon-pack="fab"
                icon-left="gitlab">
                Add
            </b-button>

            <b-button
                size="is-large"
                icon-pack="fab"
                icon-left="gitlab">
                Add
            </b-button>
        </div>

        <div class="buttons">
            <b-button
                type="is-danger"
                icon-left="times">
                Delete
            </b-button>

            <b-button
                type="is-danger"
                icon-right="times">
                Delete
            </b-button>

            <b-button
                type="is-danger"
                icon-right="times" />
        </div>

    </section>
</template>

Name	Description	Type	Value	Default
`type`	Type (color) of the control, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`size`	Vertical size of button, optional	String	`is-small`, `is-medium`, `is-large`	—
`label`	Button label, optional when default slot	String		—
`loading`	Add the loading state to the button	Boolean	—	`false`
`rounded`	Rounded style	Boolean	—	`false`
`outlined`	Outlined style	Boolean	—	`false`
`focused`	Focused style	Boolean	—	`false`
`inverted`	Inverted style	Boolean	—	`false`
`hovered`	Hovered style	Boolean	—	`false`
`active`	Active style	Boolean	—	`false`
`selected`	Selected style	Boolean	—	`false`
`expanded`	Button will be expanded (full-width)	Boolean	—	`false`
`icon-left`	Icon name to show on the left	String	—	—
`icon-right`	Icon name to show on the right	String	—	—
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`mdi`
`native-type`	Button type, like native	String	Any native button type	`button`
`tag`	Button tag name	String	`button`, `a`, `input`, `router-link`, `nuxt-link` or other nuxt alias	`button`
Any native attribute	—	—	—	—

Name	Description	Parameters
`click`	Triggers on click	`event: $event`
`[any].native`	Listen to any event using this syntax, e.g `mousedown.native`	`event: $event`

Name	Type	Default
`$button-color`	color	`$text-strong`
`$button-background-color`	color	`$scheme-main`
`$button-family`	—	`false`
`$button-border-color`	color	`$border`
`$button-border-width`	—	`$control-border-width`
`$button-padding-vertical`	—	`calc(0.5em - #{$button-border-width})`
`$button-padding-horizontal`	—	`1em`
`$button-hover-color`	color	`$link-hover`
`$button-hover-border-color`	color	`$link-hover-border`
`$button-focus-color`	color	`$link-focus`
`$button-focus-border-color`	color	`$link-focus-border`
`$button-focus-box-shadow-size`	—	`0 0 0 0.125em`
`$button-focus-box-shadow-color`	—	`bulmaRgba($link, 0.25)`
`$button-active-color`	color	`$link-active`
`$button-active-border-color`	color	`$link-active-border`
`$button-text-color`	color	`$text`
`$button-text-decoration`	—	`underline`
`$button-text-hover-background-color`	color	`$background`
`$button-text-hover-color`	color	`$text-strong`
`$button-disabled-background-color`	color	`$scheme-main`
`$button-disabled-border-color`	color	`$border`
`$button-disabled-shadow`	—	`none`
`$button-disabled-opacity`	—	`0.5`
`$button-static-color`	color	`$text-light`
`$button-static-background-color`	color	`$scheme-main-ter`
`$button-static-border-color`	color	`$border`