Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Button

Button is used to initiate actions on a page or form.

Usage 

<ui:Button>Default button</ui:Button>

States 

This is a link Disabled link 
<ui:Button loading>Loading</ui:Button>

<ui:Button disabled>Disabled</ui:Button>

<ui:Button href="#s-variants">This is a link</ui:Button>

<ui:Button href="#s-variants" disabled>Disabled link</ui:Button>

Variants 

<ui:Button var="outline">Outline</ui:Button>

<ui:Button var="ghost">Ghost</ui:Button>

<ui:Button var="text">Text</ui:Button>

<div class="row">
  <ui:Button var="primary">Primary</ui:Button>
  <ui:Button var="success">Success</ui:Button>
  <ui:Button var="warning">Warning</ui:Button>
  <ui:Button var="critical">Critical</ui:Button>
  <ui:Button var="option">Option</ui:Button>
  <ui:Button var="accent">Accent</ui:Button>
</div>
<div class="row">
  <ui:Button var="primary" disabled>Disabled</ui:Button>
  <ui:Button var="success" disabled>Disabled</ui:Button>
  <ui:Button var="warning" disabled>Disabled</ui:Button>
  <ui:Button var="critical" disabled>Disabled</ui:Button>
  <ui:Button var="option" disabled>Disabled</ui:Button>
  <ui:Button var="accent" disabled>Disabled</ui:Button>
</div>

<div class="row">
  <ui:Button var="outline-primary">Outline Primary</ui:Button>
  <ui:Button var="outline-success">Outline Success</ui:Button>
  <ui:Button var="outline-warning">Outline Warning</ui:Button>
</div>
<div class="row">
  <ui:Button var="outline-primary" disabled>Disabled</ui:Button>
  <ui:Button var="outline-success" disabled>Disabled</ui:Button>
  <ui:Button var="outline-warning" disabled>Disabled</ui:Button>
</div>
<div class="row">
  <ui:Button var="outline-critical">Outline Critical</ui:Button>
  <ui:Button var="outline-option">Outline Option</ui:Button>
  <ui:Button var="outline-accent">Outline Accent</ui:Button>
</div>
<div class="row">
  <ui:Button var="outline-critical" disabled>Disabled</ui:Button>
  <ui:Button var="outline-option" disabled>Disabled</ui:Button>
  <ui:Button var="outline-accent" disabled>Disabled</ui:Button>
</div>

With icons 

<ui:Button icon="refresh">Refresh</ui:Button>
<ui:Button icon="alarm" var="critical">Alarm</ui:Button>
<ui:Button icon="upload" var="outline-primary">Upload</ui:Button>

Sizes 

<div class="row">
  <ui:Button size="mini">Mini button</ui:Button>
  <ui:Button size="small">Small button</ui:Button>
  <ui:Button>Default button</ui:Button>
  <ui:Button size="large">Large button</ui:Button>
</div>
<div class="row">
  <ui:Button size="xlarge">Big button</ui:Button>
</div>

Shapes 

<div class="row">
  <ui:Button shape="circle" icon="refresh" size="xlarge" />
  <ui:Button shape="circle" icon="refresh" size="large" />
  <ui:Button shape="circle" icon="refresh" />
  <ui:Button shape="circle" icon="refresh" size="small" />
  <ui:Button shape="circle" icon="refresh" size="mini" />
</div>
<div class="row">
  <ui:Button shape="square" icon="alarm" size="xlarge" />
  <ui:Button shape="square" icon="alarm" size="large" />
  <ui:Button shape="square" icon="alarm" />
  <ui:Button shape="square" icon="alarm" size="small" />
  <ui:Button shape="square" icon="alarm" size="mini" />
</div>
<div class="row">
  <ui:Button block>Default block</ui:Button>
</div>
<div class="row">
  <ui:Button size="large" block>Large block</ui:Button>
</div>
<div class="row">
  <ui:Button size="xlarge" block>Big block</ui:Button>
</div>

Component arguments 

Button 

ArgumentTypeDescription
href str Optional. Pass this argument to have a link that looks like a button.
var str Optional. The variant of the button. Can be one of: outline, ghost, text, primary success, warning, critical, option, accent, outline-primary, outline-success, outline-warning, outline-critical, outline-option, or outline-accent.
size str Optional. The size of the button. Can be one of: mini, small, medium, large, or xlarge. Default is medium.
shape str Optional. The shape of the button. Can be one of: circle, or square.
block bool Optional. If True, the button will take the full width of its parent. Default is False.
disabled bool Optional. If True, the button will be disabled. Default is False.
loading bool Optional. If True, the button will show a loading spinner and no other icon. Default is False.
icon str Optional. The name of the Material Symbol icon to show on the button.

Components 

Component
File
Source
Button
button.jinja
button.css