Dashboard Layout

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import DashboardLayout, DashboardLayoutLandmark, DashboardLayoutPanel, DashboardLayoutPanelSpan, DashboardLayoutPanelState, DashboardLayoutSection, DashboardLayoutState from @prepared911/ui/blocks/dashboard-layout. See props.ts for the props and schema.ts for the declaration (inputs, slots, composed components, variants).

DashboardLayout

Prop	Type	Default
`title`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	none
`level`	`PageHeaderLevel`	`One`
`breadcrumb`, `actions`	`ReactNode`	none
`landmark`	`DashboardLayoutLandmark`	`Main`
`state`	`DashboardLayoutState`	`Ready`
`children`	`ReactNode`	none; not on `Loading` or `Empty`
`loadingLabel`	`LocalizedMessage`	required on `Loading`; optional on `Ready`
`loadingShape`	`{ metrics?, panels? }`	`{ metrics: 4, panels: 2 }`
`emptyTitle`	`LocalizedMessage`	required on `Empty`
`emptyDescription`, `emptyAction`	`LocalizedMessage`, `ReactNode`	none

DashboardLayoutSection

Prop	Type	Default
`title`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	none
`headingLevel`	`CardHeadingLevel`	`H2`
`children`	`ReactNode`	none

DashboardLayoutPanel

Prop	Type	Default
`title`	`LocalizedMessage \| DisplayValue`	required
`description`	`LocalizedMessage \| DisplayValue`	none
`headingLevel`	`CardHeadingLevel`	`H3`
`span`	`DashboardLayoutPanelSpan`	`Full`
`controls`	`ReactNode`	none
`state`	`DashboardLayoutPanelState`	`Ready`
`chart`, `children`	`ReactNode`	none; not on `Loading` or `Empty`
`loadingLabel`	`LocalizedMessage`	required on `Loading`
`emptyTitle`	`LocalizedMessage`	required on `Empty`
`emptyDescription`	`LocalizedMessage`	none

Tiers

Container inline size	Metric tile	Full	TwoThirds	Half	Third
below 1080px	12 of 12	12	12	12	12
1080px and up	6 of 12	12	12	6	6
1280px and up	3 of 12	12	8	6	4

Props

Name	Type	Default	Description
`title`	`LocalizedMessage`	—	Page title, rendered by the page header as the heading.
`actions`	`ReactNode`	—	Buttons or a ButtonGroup at the inline-end edge of the title row, passed to the page header.
`breadcrumb`	`ReactNode`	—	Breadcrumb above the title, passed to the page header.
`children`	`ReactNode`	—	One or more {@link DashboardLayoutSection }. A loading dashboard shows no sections. An empty dashboard shows no sections.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`description`	`LocalizedMessage`	—	Supporting copy under the title.
`emptyAction`	`ReactNode`	—	A showing dashboard has no empty-state action. A loading dashboard has no empty-state action. Primary action under the description, usually a Button.
`emptyDescription`	`LocalizedMessage`	—	A showing dashboard has no empty-state copy. A loading dashboard has no empty-state copy. What to do about it.
`emptyTitle`	`LocalizedMessage`	—	A showing dashboard has no empty-state copy. A loading dashboard has no empty-state copy. Heading copy of the empty state, such as "No data yet".
`id`	`string`	—	Id of the landmark element.
`landmark`	`DashboardLayoutLandmark`	`DashboardLayoutLandmark.Main`	The landmark that hosts the dashboard.
`level`	`PageHeaderLevel`	`PageHeaderLevel.One`	Heading level of the title. The sections below it are one level deeper by default; when this is not {@link PageHeaderLevel.One}, pass the matching `headingLevel` to each section.
`loadingLabel`	`LocalizedMessage`	—	Names the pending state of a section that suspends, for assistive technology. Setting it wraps the sections in a `LoadingBoundary` whose loading slot is the layout's placeholders. Omit it when nothing in the sections suspends. The one loading status assistive technology reads. Visually hidden: the placeholders are the visible cue. An empty dashboard has no pending state.
`loadingShape`	`DashboardLayoutLoadingShape`	—	Placeholder counts for the suspended state. Placeholder counts. An empty dashboard has no placeholders.
`ref`	`Ref<HTMLElement>`	—	Ref to the landmark element.
`state`	`DashboardLayoutState`	—	Show the sections. Replace the sections with placeholders that reserve the layout. Replace the sections with an empty state.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Dashboard Layout / Usage

Dashboard Layout / Accessibility

On this page

DashboardLayout

DashboardLayoutSection

Dashboard Layout

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

DashboardLayout

Prop	Type	Default
`title`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	none
`level`	`PageHeaderLevel`	`One`
`breadcrumb`, `actions`	`ReactNode`	none
`landmark`	`DashboardLayoutLandmark`	`Main`
`state`	`DashboardLayoutState`	`Ready`
`children`	`ReactNode`	none; not on `Loading` or `Empty`
`loadingLabel`	`LocalizedMessage`	required on `Loading`; optional on `Ready`
`loadingShape`	`{ metrics?, panels? }`	`{ metrics: 4, panels: 2 }`
`emptyTitle`	`LocalizedMessage`	required on `Empty`
`emptyDescription`, `emptyAction`	`LocalizedMessage`, `ReactNode`	none

DashboardLayoutSection

Prop	Type	Default
`title`	`LocalizedMessage`	required
`description`	`LocalizedMessage`	none
`headingLevel`	`CardHeadingLevel`	`H2`
`children`	`ReactNode`	none

DashboardLayoutPanel

Prop	Type	Default
`title`	`LocalizedMessage \| DisplayValue`	required
`description`	`LocalizedMessage \| DisplayValue`	none
`headingLevel`	`CardHeadingLevel`	`H3`
`span`	`DashboardLayoutPanelSpan`	`Full`
`controls`	`ReactNode`	none
`state`	`DashboardLayoutPanelState`	`Ready`
`chart`, `children`	`ReactNode`	none; not on `Loading` or `Empty`
`loadingLabel`	`LocalizedMessage`	required on `Loading`
`emptyTitle`	`LocalizedMessage`	required on `Empty`
`emptyDescription`	`LocalizedMessage`	none

Tiers

Container inline size	Metric tile	Full	TwoThirds	Half	Third
below 1080px	12 of 12	12	12	12	12
1080px and up	6 of 12	12	12	6	6
1280px and up	3 of 12	12	8	6	4

Props

Name	Type	Default	Description
`title`	`LocalizedMessage`	—	Page title, rendered by the page header as the heading.
`actions`	`ReactNode`	—	Buttons or a ButtonGroup at the inline-end edge of the title row, passed to the page header.
`breadcrumb`	`ReactNode`	—	Breadcrumb above the title, passed to the page header.
`children`	`ReactNode`	—	One or more {@link DashboardLayoutSection }. A loading dashboard shows no sections. An empty dashboard shows no sections.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`description`	`LocalizedMessage`	—	Supporting copy under the title.
`emptyAction`	`ReactNode`	—	A showing dashboard has no empty-state action. A loading dashboard has no empty-state action. Primary action under the description, usually a Button.
`emptyDescription`	`LocalizedMessage`	—	A showing dashboard has no empty-state copy. A loading dashboard has no empty-state copy. What to do about it.
`emptyTitle`	`LocalizedMessage`	—	A showing dashboard has no empty-state copy. A loading dashboard has no empty-state copy. Heading copy of the empty state, such as "No data yet".
`id`	`string`	—	Id of the landmark element.
`landmark`	`DashboardLayoutLandmark`	`DashboardLayoutLandmark.Main`	The landmark that hosts the dashboard.
`level`	`PageHeaderLevel`	`PageHeaderLevel.One`	Heading level of the title. The sections below it are one level deeper by default; when this is not {@link PageHeaderLevel.One}, pass the matching `headingLevel` to each section.
`loadingLabel`	`LocalizedMessage`	—	Names the pending state of a section that suspends, for assistive technology. Setting it wraps the sections in a `LoadingBoundary` whose loading slot is the layout's placeholders. Omit it when nothing in the sections suspends. The one loading status assistive technology reads. Visually hidden: the placeholders are the visible cue. An empty dashboard has no pending state.
`loadingShape`	`DashboardLayoutLoadingShape`	—	Placeholder counts for the suspended state. Placeholder counts. An empty dashboard has no placeholders.
`ref`	`Ref<HTMLElement>`	—	Ref to the landmark element.
`state`	`DashboardLayoutState`	—	Show the sections. Replace the sections with placeholders that reserve the layout. Replace the sections with an empty state.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Dashboard Layout / Usage

Dashboard Layout / Accessibility

On this page

DashboardLayout

DashboardLayoutSection