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.