Button
The classic button, in different colors, sizes, and states
Examples
Base
Show code
States and Styles
Show code
Outlined
Show code
Inverted
Show code
Sizes
Show code
Icons
Show code
Tags
Show code
Class props
Button component
The classic button, in different colors, sizes, and states
html
<o-button></o-button>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
ariaRole | Accessibility Role attribute to be passed to the button. | string | - | From config: button: { |
disabled | Button will be disabled | boolean | - | false |
expanded | Button will be expanded (full-width) | boolean | - | false |
iconLeft | Icon name to show on the left | string | - | |
iconPack | Icon pack to use | string | mdi , fa , fas and any other custom icon pack | From config: button: { |
iconRight | Icon name to show on the right | string | - | |
inverted | Enable inverted style | boolean | - | false |
label | Button label, unnecessary when default slot is used | string | - | |
loading | Enable loading style | boolean | - | false |
outlined | Enable outlined style | boolean | - | false |
override | Override existing theme classes completely | boolean | - | |
rounded | Enable rounded style | boolean | - | From config: button: { |
size | Size of the control | string | small , medium , large | From config: button: { |
tag | Button tag name | DynamicComponent | button , a , input , router-link , nuxt-link (or other nuxt alias) | From config: button: { |
type | Button type, like native | "button" | "reset" | "submit" | button , submit , reset | "button" |
variant | Color variant of the control | string | primary , info , success , warning , danger , and any other custom color | From config: button: { |
Slots
Name | Description | Bindings |
---|---|---|
default | Override the label, default is label prop |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$button-background-color | transparent |
$button-color | var(--#{$prefix}black) |
$button-border-radius | var(--#{$prefix}base-border-radius) |
$button-border-color | var(--#{$prefix}grey-lighter) |
$button-border | 1px solid $button-border-color |
$button-box-shadow | none |
$button-font-weight | 400 |
$button-line-height | var(--#{$prefix}base-line-height) |
$button-margin-icon-to-text | 0.1875em |
$button-margin | 0 |
$button-height | $control-height |
$button-padding | $control-padding-vertical 0.75em |
$button-rounded-border-radius | var( --#{$prefix}#{base-border-radius-rounded}) |
$button-disabled-opacity | var(--#{$prefix}#{base-disabled-opacity}) |
$button-outlined-background-color | transparent |
$button-outlined-border-color | var(--#{$prefix}grey-light) |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$button-shadow | css.getVar("focus-shadow-size") hsla( css.getVar("button-h"), css.getVar("button-s"), css.getVar("button-l"), css.getVar("focus-shadow-alpha") ) |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$btn-spacer | 0.5rem |
$btn-height | 2.35em |
$btn-border-color | var(--#{$prefix}border-color) |
$btn-hover-border-color | var(--#{$prefix}border-color) |
$btn-hover-box-shadow | $box-shadow-sm |
See ➜ 📄 Full scss file