Button

The Button component extends the HTML's native button element with more features. For example, the button can be have different colors, sizes, and states.

The component implements the W3C ARIA APG Button Pattern.

Examples

Base

The label property is used to populate the text of the button. Alternatively, you can naturaly use the default slot instead.

Show code

HTML

<section>
    <o-field grouped>
        <o-field label="Size">
            <o-select v-model="settings.size">
                <option value="small">small</option>
                <option value="default">default</option>
                <option value="medium">medium</option>
                <option value="large">large</option>
            </o-select>
        </o-field>
        <o-field label="Variant">
            <o-select v-model="settings.variant">
                <option value="default">default</option>
                <option value="primary">primary</option>
                <option value="secondary">secondary</option>
                <option value="success">success</option>
                <option value="info">info</option>
                <option value="warning">warning</option>
                <option value="danger">danger</option>
            </o-select>
        </o-field>
        <o-field label="Inverted">
            <o-switch v-model="settings.inverted" />
        </o-field>
        <o-field label="Outlined">
            <o-switch v-model="settings.outlined" />
        </o-field>
        <o-field label="Rounded">
            <o-switch v-model="settings.rounded" />
        </o-field>
        <o-field label="Disabled">
            <o-switch v-model="settings.disabled" />
        </o-field>
        <o-field label="Loading">
            <o-switch v-model="settings.loading" />
        </o-field>
    </o-field>

    <o-button
        :variant="settings.variant"
        :size="settings.size"
        :rounded="settings.rounded"
        :inverted="settings.inverted"
        :outlined="settings.outlined"
        :disabled="settings.disabled"
        :loading="settings.loading"
        @click="clickMe">
        Click Me
    </o-button>
</section>

JS

import { reactive } from "vue";

const clickMe = (): void => {
    alert("Clicked!");
};

const settings = reactive({
    variant: "primary",
    size: "medium",
    rounded: false,
    outlined: false,
    inverted: false,
    disabled: false,
    loading: false,
});

States

You can disable the button by using the the disabled property.
You can use the rounded property to curve the edges.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Normal" />
        <o-button label="Disabled" disabled />
        <o-button label="Rounded" rounded />
    </p>
    <p>
        <o-button label="Expanded" expanded />
    </p>
</section>

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Default" />
        <o-button label="Primary" variant="primary" />
        <o-button label="Secondary" variant="secondary" />
        <o-button label="Success" variant="success" />
        <o-button label="Info" variant="info" />
        <o-button label="Warning" variant="warning" />
        <o-button label="Danger" variant="danger" />
    </p>
</section>

Outlined

Use the outlined prop in combination with the variant prop for a lightweight look.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Default" outlined />
        <o-button label="Primary" variant="primary" outlined />
        <o-button label="Secondary" variant="secondary" outlined />
        <o-button label="Success" variant="success" outlined />
        <o-button label="Info" variant="info" outlined />
        <o-button label="Warning" variant="warning" outlined />
        <o-button label="Danger" variant="danger" outlined />
    </p>
</section>

Inverted

Use the inverted prop in combination with the variant prop for a clickable label look.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Default" inverted />
        <o-button label="Primary" variant="primary" inverted />
        <o-button label="Secondary" variant="secondary" inverted />
        <o-button label="Success" variant="success" inverted />
        <o-button label="Info" variant="info" inverted />
        <o-button label="Warning" variant="warning" inverted />
        <o-button label="Danger" variant="danger" inverted />
    </p>
</section>

Sizes

The component can be displayed in different sizes using the size prop.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Small" size="small" />
        <o-button label="Default" />
        <o-button label="Medium" size="medium" />
        <o-button label="Large" size="large" />
    </p>
</section>

Icons

Add an icon to the button to explain its function more visually.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Add" size="small" icon-left="plus" />
        <o-button label="Add" icon-left="plus" />
        <o-button label="Add" size="medium" icon-left="plus" />
        <o-button label="Add" size="large" icon-left="plus" />
    </p>

    <p>
        <o-button label="Delete" variant="danger" icon-left="trash" />
        <o-button label="Delete" variant="danger" icon-right="trash" />
        <o-button variant="danger" aria-label="Delete" icon-right="trash" />
    </p>
</section>

Tags

Instead of using the HTML button tag, the HTML tag can be customised using the tag prop, for example to define links using vue-router and router-link tag.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button label="Button" />

        <o-button
            tag="a"
            href="https://oruga-ui.com"
            target="_blank"
            label="Anchor" />

        <o-button tag="input" type="submit" value="Submit input" />

        <!-- Need vue-router -->
        <o-button tag="router-link" to="/home" label="Docs" />
    </p>
</section>

Button Component

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

<o-button></o-button>

Props

Prop name	Description	Type	Values	Default
disabled	Button will be disabled	boolean	-	false
expanded	Button will be expanded (full-width)	boolean	-	false
iconLeft	Icon name to show on the left	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: button: {   iconPack: undefined }
iconRight	Icon name to show on the right	string	-
inverted	Enable inverted style	boolean	-	false
label	Button label, unnecessary when default slot is used	string	-
loading	Enable loading style	boolean	-	false
outlined	Enable outlined style	boolean	-	false
override	Override existing theme classes completely	boolean	-
rounded	Enable rounded style	boolean	-	From config: button: {   rounded: false }
size	Size of the control	string	small, medium, large	From config: button: {   size: undefined }
tag	Button tag name	DynamicComponent	button, a, input, router-link, nuxt-link (or other nuxt alias)	From config: button: {   tag: "button" }
type	Button type, like native	"button" | "reset" | "submit"	button, submit, reset	"button"
variant	Color variant of the control	string	primary, info, success, warning, danger, and any other custom color	From config: button: {   variant: undefined }

Events

Event name	Properties	Description
click	event Event - native event	button click event

Slots

Name	Description	Bindings
left	Override the left icon.
default	Override the label, default is label prop
right	Override the right icon.

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
variantClass	Class of the root element with variant.	variant	primary info warning danger
outlinedClass	Class of the root element when outlined.	outlined	primary info warning danger
invertedClass	Class of the root element when inverted.	inverted	primary info warning danger
loadingClass	Class of the root element when loading.	loading
expandedClass	Class of the root element when expanded.	expanded
roundedClass	Class of the root element when rounded.	rounded
disabledClass	Class of the button when disabled.	disabled
iconClass	Class of the icon element.	iconLeft iconRight
iconLeftClass	Class of the icon element on the left.	iconLeft
iconRightClass	Class of the icon element on the right.	iconRight
labelClass	Class of the label element.

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$button-spacer	h.useVar("control-spacer")
$button-height	h.useVar("control-height")
$button-padding	h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal")
$button-loading-animation-duration	h.useVar("animation-speed-slow")
$button-disabled-opacity	h.useVar("control-disabled-opacity")
$button-color	h.useVar("font-color")
$button-font-size	h.useVar("font-size")
$button-font-weight	h.useVar("font-weight")
$button-line-height	h.useVar("line-height")
$button-box-shadow	none
$button-border-width	h.useVar("control-border-width")
$button-border-style	solid
$button-border-color	h.useVar("control-border-color")
$button-border-radius	h.useVar("border-radius")
$button-background-color	h.useVar("control-background-color")
$button-hover-color	$button-color
$button-hover-background-color	$button-background-color
$button-hover-border-color	h.useVar("grey-light")
$button-outlined-background-color	transparent
$button-outlined-border-color	h.useVar("grey-light")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$btn-spacer	0.5rem
$btn-height	2.35em
$btn-border-color	var(--#{$prefix}border-color)
$btn-hover-border-color	var(--#{$prefix}border-color)
$btn-hover-box-shadow	$box-shadow-sm

See ➜ 📄 SCSS file