Button

Single clickable action control with label, optional icons, and shared design tokens (appearance, tone, size, density).

HTML tag: c-e1e50e9eb30704a5cbb1fd51ba1afed37

When to use

single primary or secondary action
submit, cancel, or one-off icon button
one clickable control (not a button group)

Props

Prop	Type	Default
`label`	String
`icon_left`	String
`icon_right`	String
`appearance`	String	`solid`
`tone`	String	`primary`
`size`	String	`md`
`disabled`	Boolean
`aria_label`	String
`role`	String	`button`
`tabindex`	String	`0`
`icon`	String
`icon_behavior`	String	`none`
`density`	String	`comfortable`
`left_icon_active`	String
`right_icon_active`	String
`show_left_icon`	Boolean
`show_right_icon`	Boolean
`has_left_icon`	Boolean
`has_right_icon`	Boolean
`full_width`	Boolean
`label_position`	String	`inline`
`label_lines`	Number	`1`
`align`	String	`center`
`label_wrap_mode`	String	`wrap`

Rules

One primary action per ab-button instance.
Set .label and/or icons; use .aria_label for icon-only buttons.
appearance: solid | soft | outline | ghost | link; tone: primary | success | warning | danger.
Handle interaction via native @click (no custom action event on this component).

What to avoid

Do not build toolbars from many sibling ab-buttons when ab-actions fits. Do not use ab-button inside ab-actions markup manually — pass the actions array to ab-actions.

Example

<c-e1e50e9eb30704a5cbb1fd51ba1afed37 .label=${'Save'} .appearance=${'solid'} .tone=${'primary'} .size=${'md'} ?disabled=${saving} @click=${onSave}></c-e1e50e9eb30704a5cbb1fd51ba1afed37>