Skip to content

Button.md

Latest commit

 

History

History
128 lines (92 loc) · 10.4 KB

Button.md

File metadata and controls

128 lines (92 loc) · 10.4 KB

Button

The Button component uses HTML's native button element by default. The label prop is used to populate the text of the button — or alternatively you can use the default slot. The button can be have different colors, sizes, and states. The component implements the W3C ARIA APG Button Pattern.

Examples

Button Component

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

<o-button></o-button>

Props

Prop name Description Type Values Default
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: {
  iconPack: undefined
}
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: {
  rounded: false
}
size Size of the control string small, medium, large
From config:
button: {
  size: undefined
}
tag Button tag name DynamicComponent button, a, input, router-link, nuxt-link (or other nuxt alias)
From config:
button: {
  tag: "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: {
  variant: undefined
}

Events

Event name Properties Description
click event Event - native event button click event

Slots

Name Description Bindings
default Override the label, default is label prop

Class Inspector

Sass Variables

Current theme ➜ Oruga

SASS Variable Default
$button-spacer h.useVar("control-spacer")
$button-height h.useVar("control-height")
$button-padding h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal")
$button-loading-animation-duration h.useVar("animation-speed-slow")
$button-disabled-opacity h.useVar("control-disabled-opacity")
$button-color h.useVar("font-color")
$button-font-size h.useVar("font-size")
$button-font-weight h.useVar("font-weight")
$button-line-height h.useVar("line-height")
$button-box-shadow none
$button-border-width h.useVar("control-border-width")
$button-border-style solid
$button-border-color h.useVar("control-border-color")
$button-border-radius h.useVar("border-radius")
$button-background-color h.useVar("control-background-color")
$button-hover-color $button-color
$button-hover-background-color $button-background-color
$button-hover-border-color h.useVar("grey-light")
$button-outlined-background-color transparent
$button-outlined-border-color h.useVar("grey-light")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

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 ➜ 📄 SCSS file