Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Button

Generates a button.

Variants

Selected

Disabled

Small

Large

Full width

Aligned at start

Submit

Link button

This makes the button look like a link.

Anchor link button

This renders an anchor link generated by Phoenix.Component.link, styled as a button.

Leading icon

Trailing icon

Dropdown caret

Icon-only

Icon button

Icon button (sizes)

Close button

Counter

Form attribute

Interactive