Action list
Material Design 3 button web component (filled, outlined, text, elevated, tonal).
- 3.2 KB gzipped
- @lit-material/button 0.3.0
- Renders on the server
Example
Action list
A form's actions, at the end
Groups
Spread out
Install
npm install @lit-material/button @lit-material/tokensimport "@lit-material/button";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-action-list>
A row of actions with consistent spacing: a form's Cancel and Save, a toolbar's buttons, a card's links. Items wrap onto a new line when the row runs out of room.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
align | align | ActionListAlign | "start" | Where the actions sit in the row: start, end (dialogs, forms) or between (spread out). |
compact | compact | boolean | false | Tighter spacing, for icon buttons. |
label | label | string | "" | Names the row; it then has role="group". |
Slots
| Slot | Description |
|---|---|
| default | The actions (buttons, icon buttons, links) or nested action lists. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-action-list-gap | Space between actions (default 8px, 16px between groups, 4px when compact). |