Actions

ActionButton

Spectrum's task button: an 8px-cornered gray button, or quiet with no fill, for toolbars and secondary tasks.

Preview

Live, in this page’s themeOpen on its own

Props

Also takes the props of React.ButtonHTMLAttributes<HTMLButtonElement>.

Prop	Type	Description
`icon`	`IconName`
`label`	`string`
`quiet`	`boolean`
`selected`	`boolean`
`size`	`Size`
`badge`	`number \| string \| boolean`
`negative`	`boolean`	Red, for a destructive action (on by default with the delete icon).

Guidelines

Spectrum's task button: an 8px-cornered gray button, or quiet with no fill, for toolbars and secondary tasks. Icon-only by default.

Provide: icon, label (required when there is no visible text; it is the accessible name and tooltip), optional visible children, quiet, selected (toggle state), size (S, M, L, XL), and badge (a number or true) for unread counts.

Use quiet action buttons in dense toolbars and on cards; filled ones when they need to read as buttons on their own.
selected turns the button neutral dark, for view toggles.
Keep a badge for things that need a response, like unread messages.

Delete is red. negative makes an ActionButton red; any ActionButton with the delete icon is red on its own.