Renders a button.

Examples

<.button>Button</.button>
<.button variant="soft" color="crimson">Soft Crimson</.button>
<.button size="3" radius="full">Large Round</.button>

Props

• variant - Button style variant: solid, soft, outline, ghost. Default: solid.
• color - Accent color. 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.
• size - Button size: 1, 2, 3, 4. Default: 2.
• radius - Border radius: none, small, medium, large, full.
• weight - Font weight: light, regular, medium, bold.
• high_contrast - Increase color contrast.
• disabled - Disabled state.
• loading - Show loading spinner (not implemented, for API compatibility).
• as - Render as: button, a, or any tag. Default: button.
• type - Button type: button, submit, reset. Default: button.
• class - Additional CSS classes.
• style - Additional inline styles.
• rest - Additional HTML attributes.

Attributes

• 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. Must be 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", or "sky".
• high_contrast (:boolean) - Whether to increase color contrast with the background.
• weight (:string) - Font weight: one of light, regular, medium, bold. Must be one of "light", "regular", "medium", or "bold".
• m (: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'}.
• mt (: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'}.
• 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'}.
• p (: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'}.
• pt (: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'}.
• 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'}.
• radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
• as (:string) - Render as button or a tag. Defaults to "button". Must be one of "button", or "a".
• variant (:string) - Button style variant. Defaults to "solid". Must be one of "classic", "solid", "soft", "surface", "outline", or "ghost".
• size (:string) - Button size. Defaults to "2". Must be one of "1", "2", "3", or "4".
• type (:string) - Button type. Defaults to "button". Must be one of "button", "submit", or "reset".
• disabled (:boolean) - Disabled state. Defaults to false.
• loading (:boolean) - Show loading spinner (API only). Defaults to false.
• class (:string) - Additional CSS classes. Defaults to nil.
• style (:string) - Additional inline styles. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)