Buttons — Component Gallery

Button

Button Variants

Variants

Appearance

Sizes

Decorations

Variants

Neutral

Brand

Success

Warning

Danger

View DSL Source

row(gap="sm" align="center")
  button(variant="neutral") Neutral
  button(variant="brand") Brand
  button(variant="success") Success
  button(variant="warning") Warning
  button(variant="danger") Danger

Appearance

Accent

Filled

Outlined

Plain

View DSL Source

row(gap="sm" align="center")
  button(appearance="accent") Accent
  button(appearance="filled") Filled
  button(appearance="outlined") Outlined
  button(appearance="plain") Plain

Sizes

Small

Medium

Large

View DSL Source

row(gap="sm" align="center")
  button(size="small") Small
  button(size="medium") Medium
  button(size="large") Large

Decorations

Settings

Add

Pill

View DSL Source

row(gap="sm" align="center")
  button(icon="gear") Settings
  button(icon="plus") Add
  button(loading) Loading
  button(pill variant="brand") Pill
  button(with-caret) Menu

Button-group

Button Group Horizontal

Horizontal

Vertical

Horizontal

Left

Center

Right

View DSL Source

button-group(label="Actions")
  button Left
  button Center
  button Right

Vertical

Button A

Button B

Button C

View DSL Source

button-group(label="Options" orientation="vertical")
  button Button A
  button Button B
  button Button C