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