Skip to content
On this page

Button

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

Base

Show code

States and Styles

Show code

Icons


Show code

Tags

Anchor
Show code

Class props


How does Class props inspector work?
Class propDescriptionPropsSuffixes
disabledClassClass of the button when disabled.disabled
elementsWrapperClassClass of the button elements wrapper.
expandedClassClass of the button when expanded.expanded
iconClassClass of the button icon.iconLeft
iconRight
iconLeftClassClass of the button icon on the left.iconLeft
iconRightClassClass of the button icon on the right.iconRight
invertedClassClass of the button when inverted.invertedprimary
info
warning
danger
labelClassClass of the button label.
loadingClassClass of the button with loading.loading
outlinedClassClass of the button outlined.outlinedprimary
info
warning
danger
rootClassClass of the root element.
roundedClassClass of the button when rounded.rounded
sizeClassClass of the button size.sizesmall
medium
large
variantClassClass of the button variant.variantprimary
info
warning
danger


Props

Prop nameDescriptionTypeValuesDefault
disabledButton will be disabledboolean-
expandedButton will be expanded (full-width)boolean-
iconBothboolean-
iconLeftIcon name to show on the leftstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
iconRightIcon name to show on the rightstring-
invertedboolean-
labelButton label, optional when default slotstring-
loadingLoading styleboolean-
nativeTypeButton type, like nativestring-'button'
outlinedOutlined styleboolean-
overrideboolean-
roundedRounded styleboolean-
From config

button: {
  rounded: false
}
sizeSize of button, optionalstringsmall, medium, large
tagButton tag namestringbutton, a, input, router-link, nuxt-link (or other nuxt alias)'button'
variantColor of the control, optionalstringprimary, info, success, warning, danger, and any other custom color

Slots

NameDescriptionBindings
default

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--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-border1px solid $button-background-color
--oruga-button-box-shadow$button-box-shadownone
--oruga-button-font-weight$button-font-weight400
--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-margin0
--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-colortransparent

Released under the MIT License.