Renders a button, or a link styled as a button when href, navigate or patch is given.

Examples

<.button>Save</.button>
<.button variant="soft" color="accent" size="sm">Filter</.button>
<.button navigate={~p"/posts/new"} color="accent">New post</.button>
<.button icon aria-label="Close"><.icon name="x-mark" /></.button>
<.button loading={@saving}>Save</.button>

Attributes

• type (:string) - Defaults to "button".
• variant (:string) - Defaults to "solid". Must be one of "solid", "soft", "outline", "ghost", or "link".
• color (:string) - Defaults to "neutral". Must be one of "neutral", "accent", "success", "warning", "danger", or "info".
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• icon (:boolean) - square icon-only button; requires aria-label. Defaults to false.
• loading (:boolean) - shows a spinner and marks the button busy. Defaults to false.
• href (:any) - Defaults to nil.
• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value", "formaction", "formmethod", "popovertarget", "popovertargetaction", "autofocus", "method", "download", "target", "rel"].

Slots

• inner_block (required)

Groups adjacent buttons into a single visual unit.

<.button_group aria-label="Pagination">
  <.button variant="outline">Prev</.button>
  <.button variant="outline">Next</.button>
</.button_group>

Attributes

• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A button that copies value (or the text of the element matched by target) to the clipboard and briefly shows a copied state.

<.copy_button value={@api_key} />
<.copy_button target="#snippet" label="Copy code" />

Attributes

• value (:string) - Defaults to nil.
• target (:string) - CSS selector of an element whose text to copy. Defaults to nil.
• label (:string) - defaults to "Copy". Defaults to nil.
• copied_label (:string) - defaults to "Copied". Defaults to nil.
• variant (:string) - Defaults to "outline". Must be one of "solid", "soft", "outline", or "ghost".
• size (:string) - Defaults to "sm". Must be one of "sm", "md", or "lg".
• icon (:boolean) - icon-only; the label becomes the aria-label. Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

A pressable toggle button (aria-pressed).

<.toggle pressed={@bold} phx-click="toggle-bold" aria-label="Bold"><.icon name="bold" /></.toggle>

Attributes

• pressed (:boolean) - Defaults to false.
• variant (:string) - Defaults to "outline". Must be one of "solid", "soft", "outline", or "ghost".
• color (:string) - Defaults to "neutral". Must be one of "neutral", "accent", "success", "warning", "danger", or "info".
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• icon (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

• inner_block (required)

A segmented control backed by real radio (or checkbox) inputs, so it works in forms, fires phx-change, and is keyboard accessible without JavaScript.

<.toggle_group name="align" value="left" label="Alignment">
  <:option value="left" aria_label="Align left"><.icon name="align-left" /></:option>
  <:option value="center">Center</:option>
</.toggle_group>

<.toggle_group field={@form[:days]} label="Days" multiple>…</.toggle_group>

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any) - selected value, or list of values when multiple.
• label (:string) (required) - accessible name (visually hidden).
• multiple (:boolean) - Defaults to false.
• size (:string) - Defaults to "sm". Must be one of "sm", or "md".
• field (Phoenix.HTML.FormField)
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form"].

Slots

• option (required) - Accepts attributes:
  • value (:string) (required)
  • aria_label (:string)
  • disabled (:boolean)