The classic button, in different colors, sizes, and states
edit on github
Examples
Base
States and Styles
Icons
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 |
default | | |
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 |