Renders a shadcn-style button.

Attributes

• variant: :default | :destructive | :outline | :secondary | :ghost | :link

• size: :default | :xs | :sm | :lg | :icon | :icon_xs | :icon_sm | :icon_lg

• as: html tag ("button" by default, often "a")
• loading: toggles an inline spinner

Examples

heex title="Primary submit action" <.button type="submit">Save changes</.button>

heex title="Outline small action" <.button variant={:outline} size={:sm}>Edit</.button>

heex title="Ghost icon action" <.button variant={:ghost} size={:icon} aria-label="Refresh"> <CinderUI.Icons.icon name="refresh-cw" /> </.button>

heex title="Link-style navigation button" <.button as="a" href="/billing" variant={:link}>Manage billing</.button>

heex title="Loading destructive action" <.button variant={:destructive} loading={true}>Deleting...</.button>

heex title="LiveView navigation" <.button navigate={~p"/settings"}>Settings</.button> <.button patch={~p"/users?page=2"} variant={:outline} size={:sm}>Next page</.button>

When navigate, patch, or href is provided, the button renders as a Phoenix.Component.link/1 instead of a plain HTML element.

Screenshot

View live examples and full component docs.

Attributes

• as (:string) - Defaults to "button".
• variant (:atom) - Defaults to :default. Must be one of :default, :destructive, :outline, :secondary, :ghost, or :link.
• size (:atom) - Defaults to :default. Must be one of :default, :xs, :sm, :lg, :icon, :icon_xs, :icon_sm, or :icon_lg.
• loading (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["type", "href", "target", "rel", "disabled", "name", "value", "form", "id", "aria-label", "navigate", "patch", "method", "download", "replace", "csrf_token"].

Slots

• inner_block (required)

Renders a horizontal or vertical button group.

Examples

heex title="Primary and secondary actions" <.button_group> <.button>Deploy</.button> <.button variant={:outline}>Rollback</.button> </.button_group>

heex title="Compact table row controls" <.button_group> <.button size={:sm} variant={:secondary}>Edit</.button> <.button size={:sm} variant={:outline}>Duplicate</.button> <.button size={:sm} variant={:destructive}>Archive</.button> </.button_group>

heex title="Vertical stack for mobile sheets" <.button_group orientation={:vertical} class="w-full"> <.button class="w-full">Save draft</.button> <.button class="w-full" variant={:outline}>Discard</.button> </.button_group>

heex title="Wizard navigation" <.button_group> <.button size={:sm}>Back</.button> <.button size={:sm}>Next</.button> </.button_group>

Screenshot

View live examples and full component docs.

Attributes

• orientation (:atom) - Defaults to :horizontal. Must be one of :horizontal, or :vertical.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a shadcn-style toggle button.

Examples

heex title="Default toggle" <.toggle pressed={true}>Bold</.toggle>

heex title="Outline variant" <.toggle variant={:outline}> <CinderUI.Icons.icon name="italic" /> Italic </.toggle>

heex title="Sizes" <div class="flex items-center gap-2"> <.toggle size={:sm}>S</.toggle> <.toggle>Default</.toggle> <.toggle size={:lg}>Large</.toggle> </div>

heex title="Disabled toggle" <.toggle disabled>Disabled</.toggle>

heex title="LiveView navigation" <.toggle patch={~p"/items?filter=active"} pressed={@filter == :active} size={:sm}> Active </.toggle>

When navigate, patch, or href is provided, the toggle renders as a Phoenix.Component.link/1 instead of a plain HTML button.

## Screenshot

View live examples and full component docs.

## Attributes

pressed (:boolean) - Defaults to false. variant (:atom) - Defaults to :default. Must be one of :default, or :outline. size (:atom) - Defaults to :default. Must be one of :default, :sm, or :lg. class (:string) - Defaults to nil. * Global attributes are accepted. Supports all globals plus: ["type", "id", "name", "value", "disabled", "aria-label", "href", "target", "rel", "navigate", "patch", "method", "replace", "csrf_token"]. ## Slots

* inner_block (required)

Groups toggles in either single-select or multi-select mode.

This component provides structure and classes only. State management should be handled by LiveView assigns or JS hooks.

Examples

heex title="Single-select alignment controls" <.toggle_group type={:single}> <.toggle>Left</.toggle> <.toggle pressed={true}>Center</.toggle> <.toggle>Right</.toggle> </.toggle_group>

heex title="Multi-select text formatting" <.toggle_group type={:multiple}> <.toggle pressed={true}>Bold</.toggle> <.toggle>Italic</.toggle> <.toggle pressed={true}>Underline</.toggle> </.toggle_group>

heex title="Vertical stack" <.toggle_group orientation={:vertical} class="items-start"> <.toggle>Alpha</.toggle> <.toggle pressed={true}>Beta</.toggle> <.toggle>Gamma</.toggle> </.toggle_group>

## Screenshot

View live examples and full component docs.

## Attributes

type (:atom) - Defaults to :single. Must be one of :single, or :multiple. orientation (:atom) - Defaults to :horizontal. Must be one of :horizontal, or :vertical. class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)