# Button

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

edit on github

# Examples

# Base

# States and Styles

# Icons

# Tags

# Props

Prop name Description Type Values Default
variant Color of the control, optional string|object primary, info, success, warning, danger, and any other custom color
size Size of button, optional string small, medium, large
label Button label, optional when default slot string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconLeft Icon name to show on the left string -
iconRight Icon name to show on the right string -
rounded Rounded style boolean - Config -> 'button.rounded': false
outlined Outlined style boolean -
expanded Button will be expanded (full-width) boolean -
inverted boolean -
nativeType Button type, like native string - 'button'
tag Button tag name string button, a, input, router-link, nuxt-link or other nuxt alias 'button'
disabled Button will be disabled boolean -
iconBoth boolean -
rootClass string -
outlinedClass string -
invertedClass string -
expandedClass string -
roundedClass string -
disabledClass string -
sizeClass string -
variantClass string -

# Slots

Name Description Bindings

# Style

CSS Variable SASS Variable Default
--oruga-button-background-color $button-background-color #ffffff
--oruga-button-border-radius $button-border-radius $base-border-radius
--oruga-button-border $button-border 1px solid #000000
--oruga-button-box-shadow $button-box-shadow none
--oruga-button-color $button-color #000000
--oruga-button-font-size $button-font-size $base-font-size
--oruga-button-font-weight $button-font-weight 400
--oruga-button-line-height $button-line-height $base-line-height
--oruga-button-margin-border-to-icon $button-margin-border-to-icon calc(-0.375em - #{$control-border-width})
--oruga-button-margin-icon-to-text $button-margin-icon-to-text .1875em
--oruga-button-icon-width $button-icon-width 1.5em
--oruga-button-margin $button-margin 0
--oruga-button-height $button-height $control-height
--oruga-button-padding $button-padding $control-padding-vertical .75em
--oruga-button-rounded-border-radius $button-rounded-border-radius $base-rounded-border-radius
--oruga-button-disabled-opacity $button-disabled-opacity $base-disabled-opacity