Standard text button. Renders as <button> by default, or <.link> when href/navigate/patch is passed via :rest.

<.button>Send</.button>
<.button variant="primary" size="sm">Save</.button>
<.button navigate={~p"/dashboard"}>Home</.button>

Attributes

• class (:any) - Defaults to nil.
• variant (:string) - Must be one of "primary".
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "name", "value", "disabled"].

Slots

• inner_block (required)

daisyUI card with optional eyebrow, title, and actions slots.

<.card>
  <:eyebrow>/design</:eyebrow>
  <:title>Kit-curated wrappers</:title>
  Body content goes here.
  <:actions><.button>Open</.button></:actions>
</.card>

Attributes

• class (:any) - Defaults to nil.
• variant (:string) - Defaults to "bordered". Must be one of "bordered", "ghost", or "elevated".
• Global attributes are accepted.

Slots

• eyebrow
• title
• actions
• inner_block (required)

Renders a single flash notice. Use inside flash_group/1 (which the layout calls), or directly when you want a one-off toast.

<.flash kind={:info} flash={@flash} />
<.flash kind={:error} title="Heads up">Something happened</.flash>

Attributes

• id (:string) - Defaults to nil.
• flash (:map) - Defaults to %{}.
• title (:string) - Defaults to nil.
• kind (:atom) (required) - Must be one of :info, or :error.
• Global attributes are accepted.

Slots

• inner_block

Renders the standard flash group: :info and :error flashes plus the disconnected/server-error toasts wired to phx-disconnected / phx-connected. Hosts call this from their root layout.

Attributes

• id (:string) - Defaults to "flash-group".
• flash (:map) (required)
• Global attributes are accepted.

Page or section header with optional subtitle and actions slots.

Attributes

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

Slots

• inner_block (required)
• subtitle
• actions

JS command for fading an element out.

Renders a Heroicon.

Heroicons come in three styles — outline, solid, and mini. Default is outline; pass name="hero-foo-solid" or name="hero-foo-mini" for the others. The host must have the Heroicons CSS plugin installed (Phoenix ships this by default in assets/vendor/heroicons.js).

<.icon name="hero-x-mark" />
<.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

Attributes

• name (:string) (required)
• class (:any) - Defaults to "size-4".
• Global attributes are accepted.

Renders a form input with label and error messages.

Pass field={@form[:foo]} for the common case; the input pulls id, name, value, and errors from the form field. Otherwise pass name, value, errors explicitly.

Supported types: text, email, password, number, search, tel, url, date, datetime-local, month, time, week, color, file, hidden, checkbox, select, textarea.

<.input field={@form[:email]} type="email" label="Email" />
<.input field={@form[:role]} type="select" options={["Admin": "admin"]} />

Class composition

The wrapper composes the daisyUI input class set internally (input / select / textarea / checkbox). Passing class adds utilities on top of those — it does not replace them. To toggle variants (size, error state) the wrapper uses dedicated logic.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• label (:string) - Defaults to nil.
• value (:any)
• type (:string) - Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "month", "number", "password", "search", "select", "tel", "text", "textarea", "time", "url", "week", or "hidden".
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• checked (:boolean)
• prompt (:string) - Defaults to nil.
• options (:list)
• multiple (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Generic data list, one row per :item slot.

<.list>
  <:item title="Title">{@post.title}</:item>
  <:item title="Views">{@post.views}</:item>
</.list>

Attributes

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

Slots

• item (required) - Accepts attributes:
  • title (:string) (required)

JS command for fading an element in.

Generic table with :col slots and an optional :action slot. Accepts either a regular list or a Phoenix.LiveView.LiveStream for :rows.

<.table id="users" rows={@users}>
  <:col :let={user} label="id">{user.id}</:col>
  <:col :let={user} label="username">{user.username}</:col>
</.table>

Attributes

• id (:string) (required)
• rows (:list) (required)
• class (:any) - Defaults to nil.
• row_id (:any) - Defaults to nil.
• row_click (:any) - Defaults to nil.
• row_item (:any) - Defaults to &Function.identity/1.
• Global attributes are accepted.

Slots

• col (required) - Accepts attributes:
  • label (:string)
• action

Translate an Ecto error tuple {msg, opts} into a plain string by interpolating %{key} placeholders. No Gettext dependency — hosts that need i18n should override this function (or wrap <.input>).