# 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
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
labelClass Class of the button label.
loadingClass Class of the button loading. loading
outlinedClass Class of the button outlined. outlined primary
rootClass Class of the root element.
roundedClass Class of the button when rounded. rounded
sizeClass Class of the button size. size small
variantClass Class of the button variant. variant primary

# Props

Prop name Description Type Values Default
disabled Button will be disabled boolean -
expanded Button will be expanded (full-width) 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 -
loading Loading style boolean -
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

# 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
--oruga-button-outlined-background-color $button-outlined-background-color transparent