PhoenixKitWeb.Components.Core.Button (phoenix_kit v2.7.0)

Copy Markdown View Source

Provides a button UI component.

Adopting this in a host app

A mix phx.new app already has its own button/1 in CoreComponents. Both names are in scope once you import this one, and no change here resolves that — the ambiguity is the name plus the import, not the body. Pick one:

import MyAppWeb.CoreComponents, except: [button: 1]

or delete your scaffold's version. Host LiveViews receive nothing from PhoenixKit automatically; importing is a deliberate step.

Summary

Functions

button(assigns)

Renders a button, or a link styled as one when given a navigation attribute.

Functions

button(assigns)

Renders a button, or a link styled as one when given a navigation attribute.

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>
<.button variant="ghost" size="sm">Cancel</.button>
<.button navigate={~p"/users/new"}>New user</.button>

Variants

variant REPLACES the base colour rather than adding to it. It used to append: the class list hardcoded btn-primary, so class="btn-ghost" left both on the element and daisyUI's rule ordering decided the winner.

The kit's set — not the scaffold's values: ~w(primary), a knob that cannot vary. Status colours (info / success / warning / error) are first-class variants: passing class="btn-error" next to the default btn-primary is how stylesheet order used to pick the winner.

Variant and size map to literal classes rather than interpolating "btn-#{@variant}", because Tailwind scans source for literal class names — an interpolated class is invisible to it and the CSS would simply not exist unless something else in the codebase happened to write it out.

Attributes

  • type (:string) - Defaults to nil.
  • variant (:string) - Base colour. Replaces the default; use class for anything outside this set. Defaults to "primary". Must be one of "primary", "secondary", "accent", "neutral", "ghost", "link", "outline", "info", "success", "warning", or "error".
  • size (:string) - daisyUI button size. Omitted leaves daisyUI's default. Defaults to nil. Must be one of nil, "xs", "sm", "md", or "lg".
  • navigate (:string) - Renders a <.link navigate=…> instead of a button. Defaults to nil.
  • patch (:string) - Renders a <.link patch=…> instead of a button. Defaults to nil.
  • href (:any) - Renders a <.link href=…> instead of a button. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value", "download", "target", "rel", "method"].

Slots

  • inner_block (required)