Button

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

Examples

Base

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>

    <o-button
        :variant="settings.variant"
        :size="settings.size"
        :rounded="settings.rounded"
        :inverted="settings.inverted"
        :outlined="settings.outlined"
        :disabled="settings.disabled"
        @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,
});

States and Styles

Show code

HTML

<section>
    <div class="odocs-spaced">
        <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" />
    </div>

    <div class="odocs-spaced">
        <o-button label="Normal" />
        <o-button label="Disabled" disabled />
        <o-button label="Rounded" rounded />
    </div>

    <div class="odocs-spaced">
        <o-button label="Expanded" variant="primary" expanded />
    </div>
</section>

Outlined

Show code

HTML

<section class="odocs-spaced">
    <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 />
</section>

Inverted

Show code

HTML

<section class="odocs-spaced">
    <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 />
</section>

Sizes

Show code

HTML

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

Icons

Show code

HTML

<section>
    <div class="odocs-spaced">
        <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" />
    </div>

    <div class="odocs-spaced">
        <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" />
    </div>
</section>

Tags

Show code

HTML

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

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

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

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

Class props

'Classes applied to the element'

Button component

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

<o-button></o-button>

Props

Prop name	Description	Type	Values	Default
ariaRole	Accessibility Role attribute to be passed to the button.	string	-	From config: button: {   ariaRole: "button" }
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	"reset" | "submit" | "button"	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 }

Slots

Name	Description	Bindings
default	Override the label, default is label prop

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$button-background-color	transparent
$button-color	var(--#{$prefix}black)
$button-border-radius	var(--#{$prefix}base-border-radius)
$button-border-color	var(--#{$prefix}grey-lighter)
$button-border	1px solid $button-border-color
$button-box-shadow	none
$button-font-weight	400
$button-line-height	var(--#{$prefix}base-line-height)
$button-margin-icon-to-text	0.1875em
$button-margin	0
$button-height	$control-height
$button-padding	$control-padding-vertical 0.75em
$button-rounded-border-radius	var( --#{$prefix}#{base-border-radius-rounded})
$button-disabled-opacity	var(--#{$prefix}#{base-disabled-opacity})
$button-outlined-background-color	transparent
$button-outlined-border-color	var(--#{$prefix}grey-light)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$button-shadow	css.getVar("focus-shadow-size") hsla( css.getVar("button-h"), css.getVar("button-s"), css.getVar("button-l"), css.getVar("focus-shadow-alpha") )

See ➜ 📄 Full scss file

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 ➜ 📄 Full scss file