Empty State
Empty state web component: an icon, a headline, guidance text and actions for a view with nothing to show yet.
- 1.4 KB gzipped
- @lit-material/empty-state 0.0.3
- Renders on the server
Example
Empty state
What a view would show and how to get there, in place of a blank panel.
No upstreams yet
Markup
<lit-material-empty-state headline="No upstreams yet" size="standard"> Add an [[upstream]] section to rws.config.toml, then reload. <lit-material-button slot="actions">Reload</lit-material-button> </lit-material-empty-state>
Install
npm install @lit-material/empty-state @lit-material/tokensimport "@lit-material/empty-state";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-empty-state>
An empty state: what a view would show and how to get there, in place of a blank panel — "No upstreams yet. Add one to rws.config.toml" with the action beside it.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
headline | headline | string | "" | |
level | level | number | 2 | The heading level, 1–6. |
size | size | "standard" | "compact" | "standard" | compact for inline use inside a card or table; standard centres it in a page area. |
Slots
| Slot | Description |
|---|---|
| default | Guidance text. |
icon | An optional illustration or icon above the headline. |
actions | Buttons or links. |
CSS parts
| Part | Description |
|---|---|
empty-state | The container. |
headline | The heading. |