Catalog Buttons

<.button>

ConnieUI.Buttons

HEEx 
<ConnieUI.Buttons.button>Save draft</ConnieUI.Buttons.button>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string
:string
:string
:string
:string
:string
:string
:string
:string
:string

stretches the button to its container's width

:string

the button's accessible name, for an icon-only button whose meaning is otherwise carried by the icon alone. A `:tooltip` is not a substitute: it names the button on hover, not to a screen reader.

:boolean

makes it a toggle button: `true` or `false` is announced as its `aria-pressed` state, `nil` leaves it a plain button

Set by the example

click gates class

Docs

No @doc for this component.

Attribute Type Default Description
id :string nil
popovertarget :string nil
popovertargetaction :string nil
size :string "sm"
sm | md | lg | xl
color :string "primary"
primary | secondary | tertiary | link-gray | link-color | link-destructive
type :string "button"
button | submit | reset
form :string nil
icon_start :string nil
icon_end :string nil
icon_start_class :string nil
icon_end_class :string nil
click {:struct, Phoenix.LiveView.JS} nil
show_loading :boolean true
disabled :boolean false
autofocus :boolean false
full_width :boolean false
stretches the button to its container's width
gates :list []
List of gates to check, e.g. [{:permission, :edit}, {:feature, :enable_x}, {:limit, :templates}]
class :any nil
aria_label :string nil
the button's accessible name, for an icon-only button whose meaning is otherwise carried by the icon alone. A `:tooltip` is not a substitute: it names the button on hover, not to a screen reader.
pressed :boolean nil
makes it a toggle button: `true` or `false` is announced as its `aria-pressed` state, `nil` leaves it a plain button nil | true | false
Slot Slot attributes Description
inner_block
:tooltip