The buttons of the canvas, as a button or as a link, in the same colors and sizes.
variant says what the action means: :primary (the one thing to do), :secondary, :ghost, :ai
(what the AI offers), :danger (asking for changes), :info (leading to something to learn), :link.
size is :sm (38px), :md (46px) or :lg (54px); :sm is under the 44px of a touch target, so use :md on touch screens. With navigate, patch or href it is a link
that looks like a button; without, a real <button>. loading shows a spinner and sets aria-busy, on the link as well. A disabled link is taken out of the tab order
(tabindex="-1") and ignores the pointer; a disabled button is flat grey in the regular weight. shape: :round makes it a pill, or a circle with icon_only (44px at :md).
It is called as <Button.button> (alias DevactionUI.Button), not imported, so it does not collide
with the button/1 of another UI kit in the same app.
Summary
Functions
A button, or a link that looks like one when navigate, patch or href is given.
Functions
A button, or a link that looks like one when navigate, patch or href is given.
<Button.button variant={:primary} phx-click="save">Save</Button.button>
<Button.button navigate={~p"/orders"}>Orders</Button.button>Attributes
variant(:atom) - what the action means, from:primary(the one thing to do) to:link. Defaults to:secondary. Must be one of:primary,:secondary,:ghost,:ai,:danger,:info, or:link.size(:atom) - 38, 46 or 54 px high. Defaults to:md. Must be one of:sm,:md, or:lg.shape(:atom) - Defaults to:square. Must be one of:square, or:round.loading(:boolean) - a spinner before the text, andaria-busy. Defaults tofalse.disabled(:boolean) - Defaults tofalse.icon_only(:boolean) - a square button with just an icon (44px at:md); give it anaria-label. Defaults tofalse.class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["href", "navigate", "patch", "method", "download", "name", "value", "form", "type", "target", "rel"].
Slots
inner_block(required)