Actions

Render a group of related action buttons from a declarative .actions array with shared layout and default button styling.

HTML tag: c-ec2283129b04346498f2d52bf384f6497

When to use

• two or more related buttons in a toolbar or header
• action bar with shared layout
• conditional actions driven by context

Props

Prop	Type	Default	Description
orientation	String	horizontal
gap	String	md
appearance	String	initial
tone	String	initial
size	String	md
actions	Array
context	Object
title	String
show_title	Boolean	false
aria_label	String	Actions
role	String	group
align	String	center
justify	String	start
wrap	Boolean	true
density	String	comfortable
custom_mode	Boolean

Rules

• Use for two or more related actions (toolbars, headers, footers, dashlet/card action rows).
• For a single CTA use ab-button instead.
• Listen for the single action event and branch on detail.id.
• Pass .context for conditional visibility (render_if, hide_if, show_if, disable_if, enable_if).

Events

Event	Detail
action	id: string, index: number, context: object

What to avoid

Do not use ab-actions for one button. Do not duplicate the same actions as separate ab-button siblings when a group is intended. Do not use for tabular row actions — use ab-data-grid column widgets or list item_actions_slot.

Example

<c-ec2283129b04346498f2d52bf384f6497 .actions=${[{ id: 'save', label: 'Save', appearance: 'solid', tone: 'primary' }, { id: 'cancel', label: 'Cancel', appearance: 'ghost' }]} .gap=${'sm'} @action=${onAction}></c-ec2283129b04346498f2d52bf384f6497>