V Vaylan UI
Actions

Button

Start actions with consistent emphasis, sizing, and loading states.

Preview

Example

<.button color={:primary}>Save changes</.button>

API contract

button/1 uses declared Phoenix attributes and slots. This table is generated from the compiled component metadata.

AttributeTypeRequiredDefaultAccepted values
type :string No "button" ["button", "submit", "reset"]
color :atom No nil [nil, :neutral, :primary, :secondary, :accent, :info, :success, :warning, :error]
variant :atom No nil [nil, :outline, :dash, :soft, :ghost, :link]
size :atom No nil [:xs, :sm, :md, :lg, :xl, nil]
shape :atom No nil [nil, :wide, :block, :square, :circle]
loading :boolean No false Any value matching the declared type
disabled :boolean No false Any value matching the declared type
class :any No nil Any value matching the declared type
rest :global No — global includes ["form", "name", "value", "phx-click", "phx-disable-with"]
SlotRequiredSlot attributes
leading No No slot attributes
inner_block Yes No slot attributes
trailing No No slot attributes

States and behavior

Current, disabled, loading, or active state is exposed where the component supports it.

Keyboard and accessibility