Documentation Playground
Skip to content
Docs

Button

Trigger an action or event, such as submitting a form or displaying a dialog. 
<.button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
  </svg>
  Bookmark
</.button>

API Reference

This component is based on the button element and supports common margin props.

Prop Type Default Description
as string "button" Render as button or a tag.
class string nil Additional CSS classes.
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
disabled boolean false Disabled state.
high_contrast boolean — Whether to increase color contrast with the background.
loading boolean false Show loading spinner (API only).
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
p any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pb any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pl any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pr any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pt any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
px any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
py any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
radius string — Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
size string "2" Button size.
style string nil Additional inline styles.
type string "button" Button type.
variant string "solid" Button style variant.
weight string — Font weight: one of light, regular, medium, bold.
as Render as button or a tag.
Type string Default "button"
class Additional CSS classes.
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
disabled Disabled state.
Type boolean Default false
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
loading Show loading spinner (API only).
Type boolean Default false
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
p Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pb Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pl Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pr Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pt Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
px Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
py Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type string Default —
size Button size.
Type string Default "2"
style Additional inline styles.
Type string Default nil
type Button type.
Type string Default "button"
variant Button style variant.
Type string Default "solid"
weight Font weight: one of light, regular, medium, bold.
Type string Default —

Examples

Size

Use the size prop to control the size of the button.

<.flex gap="3" align="center">
  <.button size="1" variant="soft">Edit profile</.button><.button size="2" variant="soft">Edit profile</.button><.button
    size="3"
    variant="soft"
  >Edit profile</.button>
</.flex>

Variant

Use the variant prop to control the visual style of the button.

<.flex align="center" gap="3" wrap="wrap">
  <.button variant="classic">Edit profile</.button><.button variant="solid">Edit profile</.button><.button variant="soft">Edit profile</.button><.button variant="surface">Edit profile</.button><.button variant="outline">Edit profile</.button>
</.flex>

Ghost

Use the ghost variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states.

<.button variant="ghost">Edit profile</.button>

Color

Use the color prop to assign a specific accent color.

<.flex gap="3" wrap="wrap">
  <.button color="indigo" variant="soft">Edit profile</.button><.button
    color="cyan"
    variant="soft"
  >Edit profile</.button><.button color="orange" variant="soft">Edit profile</.button><.button
    color="crimson"
    variant="soft"
  >Edit profile</.button>
</.flex>

High-contrast

Use the high_contrast prop to increase color contrast with the background.

<.flex direction="column" gap="3">
  <.flex gap="3" wrap="wrap">
    <.button color="gray" variant="classic">Edit profile</.button><.button
      color="gray"
      variant="solid"
    >Edit profile</.button><.button color="gray" variant="soft">Edit profile</.button><.button
      color="gray"
      variant="surface"
    >Edit profile</.button><.button color="gray" variant="outline">Edit profile</.button>
  </.flex>
  <.flex gap="3" wrap="wrap">
    <.button color="gray" variant="classic" high_contrast>Edit profile</.button><.button
      color="gray"
      variant="solid"
      high_contrast
    >Edit profile</.button><.button color="gray" variant="soft" high_contrast>Edit profile</.button><.button
      color="gray"
      variant="surface"
      high_contrast
    >Edit profile</.button><.button color="gray" variant="outline" high_contrast>Edit profile</.button>
  </.flex>
</.flex>

Radius

Use the radius prop to assign a specific radius value.

<.flex gap="3" wrap="wrap">
  <.button radius="none" variant="soft">Edit profile</.button><.button
    radius="large"
    variant="soft"
  >Edit profile</.button><.button radius="full" variant="soft">Edit profile</.button>
</.flex>

With icons

You can nest icons directly inside the button. An appropriate gap is provided automatically.

<.flex gap="3" wrap="wrap">
  <.button variant="classic">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
    </svg>
    Bookmark
  </.button><.button variant="solid"><svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  ><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg> Bookmark</.button><.button variant="soft"><svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  ><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg> Bookmark</.button><.button variant="surface"><svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  ><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg> Bookmark</.button><.button variant="outline"><svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  ><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg> Bookmark</.button>
</.flex>

Loading

Use the loading prop to display a loading spinner in place of button content, preserving the original size of the button in its normal state. The button will be disabled while loading.

<.flex gap="3" wrap="wrap">
  <.button loading variant="classic">Bookmark</.button><.button loading variant="solid">Bookmark</.button><.button
    loading
    variant="soft"
  >Bookmark</.button><.button loading variant="surface">Bookmark</.button><.button
    loading
    variant="outline"
  >Bookmark</.button>
</.flex>
← Badge Callout →