Renders an icon button.

Examples

<.icon_button><Icons.plus /></.icon_button>
<.icon_button variant="soft" color="crimson"><Icons.heart /></.icon_button>
<.icon_button size="3" radius="full"><Icons.star /></.icon_button>

Props

• variant - Button style variant: solid, soft, outline, ghost. Default: soft.
• 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.
• 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.
• 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 "soft". 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)