Skip to content

Button

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

## Examples

Base

Show code

States and Styles

Show code

Outlined

Show code

Inverted

Show code

Sizes

Show code

Icons

Show code

Tags

Show code
## Class props
'Classes applied to the element'
## Button component

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

html
<o-button></o-button>

Props

Prop nameDescriptionTypeValuesDefault
ariaRoleAccessibility Role attribute to be passed to the button.string-
From config:
button: {
  ariaRole: "button"
}
disabledButton will be disabledboolean-false
expandedButton will be expanded (full-width)boolean-false
iconLeftIcon name to show on the leftstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
button: {
  iconPack: undefined
}
iconRightIcon name to show on the rightstring-
invertedEnable inverted styleboolean-false
labelButton label, unnecessary when default slot is usedstring-
loadingEnable loading styleboolean-false
outlinedEnable outlined styleboolean-false
overrideOverride existing theme classes completelyboolean-
roundedEnable rounded styleboolean-
From config:
button: {
  rounded: false
}
sizeSize of the controlstringsmall, medium, large
From config:
button: {
  size: undefined
}
tagButton tag nameDynamicComponentbutton, a, input, router-link, nuxt-link (or other nuxt alias)
From config:
button: {
  tag: "button"
}
typeButton type, like native"button" | "reset" | "submit"button, submit, reset"button"
variantColor variant of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
button: {
  variant: undefined
}

Slots

NameDescriptionBindings
defaultOverride the label, default is label prop
## Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$button-background-colortransparent
$button-colorvar(--#{$prefix}black)
$button-border-radiusvar(--#{$prefix}base-border-radius)
$button-border-colorvar(--#{$prefix}grey-lighter)
$button-border1px solid $button-border-color
$button-box-shadownone
$button-font-weight400
$button-line-heightvar(--#{$prefix}base-line-height)
$button-margin-icon-to-text0.1875em
$button-margin0
$button-height$control-height
$button-padding$control-padding-vertical 0.75em
$button-rounded-border-radiusvar( --#{$prefix}#{base-border-radius-rounded})
$button-disabled-opacityvar(--#{$prefix}#{base-disabled-opacity})
$button-outlined-background-colortransparent
$button-outlined-border-colorvar(--#{$prefix}grey-light)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$button-shadowcss.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 VariableDefault
$btn-spacer0.5rem
$btn-height2.35em
$btn-border-colorvar(--#{$prefix}border-color)
$btn-hover-border-colorvar(--#{$prefix}border-color)
$btn-hover-box-shadow$box-shadow-sm

See ➜ 📄 Full scss file

Released under the MIT License.