A large, full-width call-to-action button with optional icon and subtitle.

Examples

<.action_button title="Confirmar" />
<.action_button title="Pagar" subtitle="€ 12,50" border_class="border-emerald-500/80" />

Attributes

• title (:string) - Defaults to "".
• subtitle (:string) - Defaults to "".
• subtitle_icon (:string) - Defaults to "".
• disabled (:boolean) - Defaults to false.
• icon (:string) - Defaults to "".
• class (:string) - Defaults to "".
• title_class (:string) - Defaults to "".
• subtitle_class (:string) - Defaults to "".
• border_class (:string) - Border and background classes for the resting state. Defaults to "border-white/15 bg-white/5".
• hover_class (:string) - Border, background and shadow classes applied on hover. Defaults to "hover:border-blue-400/50 hover:bg-blue-500/20 hover:shadow-[0_0_24px_rgba(30,58,110,0.25)]".
• text_class (:string) - Text colour class. Defaults to "text-white".
• disabled_class (:string) - Classes applied when the button is disabled. Defaults to "disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none".
• Global attributes are accepted. Supports all globals plus: ["csrf_token", "form", "href", "hreflang", "method", "name", "navigate", "patch", "rel", "replace", "target", "type", "value"].

A compact button for back-office / admin UIs.

Examples

<.backoffice_button>Guardar</.backoffice_button>
<.backoffice_button bg_class="bg-red-700 hover:bg-red-800 text-white">Eliminar</.backoffice_button>

Attributes

• type (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• bg_class (:string) - Background, text-colour, and hover classes. Defaults to "bg-gray-900 text-white hover:bg-gray-800".
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value", "phx-click", "phx-disable-with", "phx-target"].

Slots

• inner_block (required)

A general-purpose button with variant, size, loading and icon support.

Examples

<.button>Enviar</.button>
<.button variant="danger" loading={@saving}>Eliminar</.button>

Attributes

• variant (:string) - Defaults to "primary".
• size (:string) - Defaults to "md".
• disabled (:boolean) - Defaults to false.
• loading (:boolean) - Defaults to false.
• icon (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["form", "name", "type", "value", "phx-click", "phx-submit", "phx-disable-with"].

Slots

• inner_block (required)

A pill-shaped navigation button with an icon bubble on the right.

Examples

<.navigate_button title="Continuar" navigate={~p"/next"} />
<.navigate_button title="Ver detalhes" subtitle="3 itens" icon_bg_class="bg-emerald-600" />

Attributes

• title (:string) (required)
• subtitle (:string) - Defaults to nil.
• icon (:string) - Defaults to "hero-arrow-right".
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to "".
• title_class (:string) - Defaults to "".
• container_bg_class (:string) - Background/hover classes for the outer pill. Defaults to "bg-gray-100 hover:bg-gray-200".
• text_class (:string) - Colour class for the title text. Defaults to "text-gray-900".
• icon_bg_class (:string) - Background and text-colour classes for the icon bubble. Defaults to "bg-blue-900 text-white".
• Global attributes are accepted. Supports all globals plus: ["csrf_token", "download", "form", "href", "hreflang", "method", "name", "navigate", "patch", "referrerpolicy", "rel", "replace", "target", "type", "value"].

A branded primary action button with an icon.

Examples

<.primary_button title="Continuar" />
<.primary_button small bg_class="bg-emerald-600 hover:bg-emerald-700 text-white" />

Attributes

• title (:string) - Defaults to nil.
• icon (:string) - Defaults to "hero-arrow-right".
• small (:boolean) - Defaults to false.
• gap (:string) - Defaults to "gap-1.5".
• class (:string) - Defaults to nil.
• bg_class (:string) - Background, text-colour, and hover classes. Defaults to "bg-blue-900 text-white hover:bg-blue-950".
• Global attributes are accepted. Supports all globals plus: ["disabled", "phx-click", "phx-disable-with", "phx-target", "form", "type"].

A secondary (ghost-tinted) button, icon position is configurable.

Examples

<.secondary_button title="Voltar" />
<.secondary_button title="Ajuda" no_icon />
<.secondary_button title="Avançar" icon="hero-arrow-right" icon_position="right" />

Attributes

• title (:string) (required)
• icon (:string) - Defaults to "hero-arrow-left".
• icon_position (:string) - Defaults to "right".
• no_icon (:boolean) - Defaults to false.
• gap (:string) - Defaults to "gap-1.5".
• class (:string) - Defaults to nil.
• bg_class (:string) - Background, text-colour, and hover classes. Defaults to "bg-blue-50 text-blue-800 hover:bg-blue-100".
• Global attributes are accepted. Supports all globals plus: ["disabled", "phx-click", "phx-disable-with", "phx-target", "type"].