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
aria-activedescendant	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.	string	-
aria-atomic	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.	Booleanish	-
aria-autocomplete	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.	"both" | "inline" | "list" | "none"	-
aria-busy	Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.	Booleanish	-
aria-checked	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.	"mixed" | Booleanish	-
aria-colcount	Defines the total number of columns in a table, grid, or treegrid.	Numberish	-
aria-colindex	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.	Numberish	-
aria-colspan	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.	Numberish	-
aria-controls	Identifies the element (or elements) whose contents or presence are controlled by the current element.	string	-
aria-current	Indicates the element that represents the current item within a container or set of related elements.	"date" | "location" | "page" | "step" | "time" | Booleanish	-
aria-describedby	Identifies the element (or elements) that describes the object.	string	-
aria-details	Identifies the element that provides a detailed, extended description for the object.	string	-
aria-disabled	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.	Booleanish	-
aria-dropeffect	deprecated - in ARIA 1.1 Indicates what functions can be performed when a dragged object is released on the drop target.	"copy" | "execute" | "link" | "move" | "none" | "popup"	-
aria-errormessage	Identifies the element that provides an error message for the object.	string	-
aria-expanded	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.	Booleanish	-
aria-flowto	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.	string	-
aria-grabbed	deprecated - in ARIA 1.1 Indicates an element's "grabbed" state in a drag-and-drop operation.	Booleanish	-
aria-haspopup	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.	"dialog" | "grid" | "listbox" | "menu" | "tree" | Booleanish	-
aria-hidden	Indicates whether the element is exposed to an accessibility API.	Booleanish	-
aria-invalid	Indicates the entered value does not conform to the format expected by the application.	"grammar" | "spelling" | Booleanish	-
aria-keyshortcuts	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.	string	-
aria-label	Defines a string value that labels the current element.	string	-
aria-labelledby	Identifies the element (or elements) that labels the current element.	string	-
aria-level	Defines the hierarchical level of an element within a structure.	Numberish	-
aria-live	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.	"assertive" | "off" | "polite"	-
aria-modal	Indicates whether an element is modal when displayed.	Booleanish	-
aria-multiline	Indicates whether a text box accepts multiple lines of input or only a single line.	Booleanish	-
aria-multiselectable	Indicates that the user may select more than one item from the current selectable descendants.	Booleanish	-
aria-orientation	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.	"horizontal" | "vertical"	-
aria-owns	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.	string	-
aria-placeholder	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.	string	-
aria-posinset	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.	Numberish	-
aria-pressed	Indicates the current "pressed" state of toggle buttons.	"mixed" | Booleanish	-
aria-readonly	Indicates that the element is not editable, but is otherwise operable.	Booleanish	-
aria-relevant	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.	"additions removals" | "additions text" | "additions" | "all" | "removals additions" | "removals text" | "removals" | "text additions" | "text removals" | "text"	-
aria-required	Indicates that user input is required on the element before a form may be submitted.	Booleanish	-
aria-roledescription	Defines a human-readable, author-localized description for the role of an element.	string	-
aria-rowcount	Defines the total number of rows in a table, grid, or treegrid.	Numberish	-
aria-rowindex	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.	Numberish	-
aria-rowspan	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.	Numberish	-
aria-selected	Indicates the current "selected" state of various widgets.	Booleanish	-
aria-setsize	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.	Numberish	-
aria-sort	Indicates if items in a table or grid are sorted in ascending or descending order.	"ascending" | "descending" | "none" | "other"	-
aria-valuemax	Defines the maximum allowed value for a range widget.	Numberish	-
aria-valuemin	Defines the minimum allowed value for a range widget.	Numberish	-
aria-valuenow	Defines the current value for a range widget.	Numberish	-
aria-valuetext	Defines the human readable text alternative of aria-valuenow for a range widget.	string	-
disabled	Interaction will be disabled	boolean	-	false
expanded	Button will be expanded (full-width)	boolean	-	false
form	Same as native form	string	-
formaction	Override the parent form's action URL (submit buttons only)	string	-
formenctype	Override the parent form's enctype (submit buttons only)	string	-
formmethod	Override the parent form's method (submit buttons only)	string	-
formnovalidate	Skip HTML5 validation for this submit button	Booleanish	-
formtarget	Override the parent form's target (submit buttons only)	string	-
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
name	Same as native name	string	-
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"
value	Same as native value	number | readonly string[] | string	-
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 root element 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

Current theme ➜ Tailwind

SASS Variable	Default
// $btn-spacer	0.5rem
// $btn-font-size	var(--text-base)
// $btn-font-weight	500
// $btn-padding	0.70rem 0.70rem

See ➜ 📄 SCSS file