Button

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


<Button>Button</Button>

# Sizes 


<div class="buttons">
  <Button>Default</Button>
  <Button size="small" color="info">Small</Button>
  <Button size="normal" color="primary" >Normal</Button>
  <Button size="medium" color="warning" >Medium</Button>
  <Button size="large" color="danger" >Large</Button>
</div>

# Rounded 


<div class="buttons">
  <Button rounded>Rounded</Button>
  <Button color="info" rounded>Rounded</Button>
</div>

# List of buttons 


<div class="buttons">
  <Button color="success">Save changes</Button>
  <Button color="info">Save and continue</Button>
  <Button color="danger">Cancel</Button>
</div>

<div class="buttons has-addons">
  <Button color="success" selected>Yes</Button>
  <Button>Maybe</Button>
  <Button>No</Button>
</div>

<div class="buttons has-addons is-centered">
  <Button>Yes</Button>
  <Button color="info" selected>Maybe</Button>
  <Button>No</Button>
</div>

<div class="buttons has-addons is-right">
  <Button>Yes</Button>
  <Button>Maybe</Button>
  <Button color="danger" selected>No</Button>
</div>
Name Description Type Values Default
label The label of the button, when no content (default slot) is provided.

:string — —
color The color of the button.

:string white, black, light, dark, primary, link, info, success, warning, danger —
size The vertical size of button.

:string small, normal, medium, large —
expand Button is expanded (full-width).

:boolean — —
disabled Set the button as disabled preventing the user from interacting with the control.

:boolean — —
outlined Outlined style.

:boolean — —
rounded Rounded style.

:boolean — —
hovered Hovered style.

:boolean — —
focused Focused style.

:boolean — —
active Active style.

:boolean — —
selected Selected style.

:boolean — —
loading Loading state.

:boolean — —