Catalog Buttons

<.actions>

ConnieUI.Buttons

HEEx 
<ConnieUI.Buttons.actions id="catalog-actions">
  <ConnieUI.Buttons.action click={JS.push("edit")}>Edit</ConnieUI.Buttons.action>
  <ConnieUI.Buttons.action click={JS.push("delete")}>Delete</ConnieUI.Buttons.action>
</ConnieUI.Buttons.actions>

Variant matrix

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

Controls

:string
:string
:string

the trigger's accessible name; name the thing being acted on where there are several

:string
:string

the size of the trigger

Docs

A `⋯` button opening a compact row of verbs. For the two or three things that can be done to one item: edit it, delete it. A stack of full-width menu rows is the right shape for a menu of destinations or of settings, and the wrong one for two words, which leave most of a `3xs` popover empty and send the eye further than the words are long. The `id` is required rather than generated. A stateless component rebuilds its assigns on every render, so generating one hands LiveView a fresh id each patch, and it keys DOM patching on id. ## Examples <ConnieUI.Buttons.actions id={"actions-#{@message.id}"}> <ConnieUI.Buttons.action click={JS.push("edit", value: %{id: @message.id})}> Edit </ConnieUI.Buttons.action> <ConnieUI.Buttons.action click={JS.push("delete", value: %{id: @message.id})}> Delete </ConnieUI.Buttons.action> </ConnieUI.Buttons.actions>
Attribute Type Default Description
id * :string
icon :string "icon-dots-horizontal"
aria_label :string "Actions"
the trigger's accessible name; name the thing being acted on where there are several
position :string "bottom-end"
size :string "sm"
the size of the trigger sm | md
Slot Slot attributes Description
inner_block *