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
type The button type, defaults to "button", mainly used for instances like modal X to close style buttons where you don't want to set a type at all. Setting to nil makes button have no type.

 		:string — "button"
label The label of the button, when no content (default slot) is provided.

 		:string — —
aria_label The aria label for the button.

 		: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 —
value The value for the button.

 		:string — —
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 — —
class Css classes to propagate down to button. Default class if no class supplied is simply button.

 		:css_class — []
opts Additional attributes to add onto the generated element.

 		:keyword — []