Dashlet
Visual panel for one dashboard or page unit (chart, KPI, grid, list, etc.) with header, optional actions, and loading/error/empty states.
HTML tag: c-e0dfd2e72decc4928b34a21a035798d38
When to use
Section titled “When to use”- dashboard tile wrapping a chart or grid
- panel with loading, error, or empty states
- metric section inside ab-dashboard
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | “ | |
span | Number | 1 | |
loading | Boolean | false | |
empty | Boolean | false | |
error | Boolean | false | |
actions | Array | “ | |
subtitle | String | “ | |
empty_message | String | No data available | |
error_message | String | Something went wrong | |
bordered | Boolean | true | |
padded | Boolean | true | |
overflow | String | auto | |
height | Number |
- On dashboards, always wrap ab-chart and ab-data-grid inside ab-dashlet.
- Use .title / .subtitle for the panel header.
- Drive UX states with .loading, .error, .empty (mutually prioritized — see state_priority).
- Header actions: .actions array or header_actions slot.
What to avoid
Section titled “What to avoid”Do not skip ab-dashlet when placing charts on ab-dashboard. Do not wrap ab-chart in ab-card inside ab-dashlet — put ab-chart directly in the dashlet default slot; dashlet .title is the panel header. Do not set loading and error true at the same time expecting both UIs.