# Button

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


edit on github

# Examples

# Base

# States and Styles

# Icons

# Tags

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
disabledClass Class of the button when disabled. disabled
elementsWrapperClass Class of the button elements wrapper.
expandedClass Class of the button when expanded. expanded
iconClass Class of the button icon. iconLeft
iconRight
iconLeftClass Class of the button icon on the left. iconLeft
iconRightClass Class of the button icon on the right. iconRight
invertedClass Class of the button when inverted. inverted primary
info
warning
danger
labelClass Class of the button label.
outlinedClass Class of the button outlined. outlined primary
info
warning
danger
rootClass Class of the root element.
roundedClass Class of the button when rounded. rounded
sizeClass Class of the button size. size small
medium
large
variantClass Class of the button variant. variant primary
info
warning
danger


# Props

Prop name Description Type Values Default
disabled Button will be disabled boolean -
expanded Button will be expanded (full-width) boolean -
iconBoth boolean -
iconLeft Icon name to show on the left string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconRight Icon name to show on the right string -
inverted boolean -
label Button label, optional when default slot string -
nativeType Button type, like native string - 'button'
outlined Outlined style boolean -
override Override classes boolean - false
rounded Rounded style boolean -
From config

button: {
  rounded: false
}
size Size of button, optional string small, medium, large
tag Button tag name string button, a, input, router-link, nuxt-link (or other nuxt alias) 'button'
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-button-background-color $button-background-color $primary
--oruga-button-color $button-color $primary-invert
--oruga-button-border-radius $button-border-radius $base-border-radius
--oruga-button-border $button-border 1px solid $button-background-color
--oruga-button-box-shadow $button-box-shadow none
--oruga-button-font-weight $button-font-weight 400
--oruga-button-line-height $button-line-height $base-line-height
--oruga-button-margin-icon-to-text $button-margin-icon-to-text .1875em
--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