Empty text

API and Development

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

EmptyText renders an em dash by default with aria-label from the required label prop, so empty table cells and metadata fields stay perceivable. Inherits TextProps picks: type, color, asSpan, and optional children to override the glyph.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	Accessible name announced in place of the visible placeholder, such as "No phone number".
`as`	`"span" \| "p"`	—	Element to render. Defaults to `span`.
`children`	`ReactNode`	—	Visible placeholder. Omit it for an em dash.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`foreground`	`Foreground.Default \| Foreground.Subtle \| Foreground.Disabled`	—	Foreground color. Defaults to default.
`id`	`string`	—	Element id.
`ref`	`Ref<HTMLElement>`	—	Ref to the rendered element.
`type`	`TextType.Subtitle \| TextType.SubtitleMedium \| TextType.BodyLarge \| TextType.BodyLargeEmphasis \| TextType.BodyMedium \| TextType.BodyMediumEmphasis \| TextType.Label \| TextType.Caption \| TextType.CaptionEmphasis \| TextType.Code1 \| TextType.Code2`	—	Chroma typography role. Defaults to body medium (13px).

Storybook

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

DefaultOpens in a new tab

Default

Custom children

In DataList

In DataList with custom labels

List-level emptyLabel fallback

Empty text / Usage

Empty text / Accessibility

On this page

In DataList with custom labels

List-level emptyLabel fallback

Empty text

API and Development

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

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	Accessible name announced in place of the visible placeholder, such as "No phone number".
`as`	`"span" \| "p"`	—	Element to render. Defaults to `span`.
`children`	`ReactNode`	—	Visible placeholder. Omit it for an em dash.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`foreground`	`Foreground.Default \| Foreground.Subtle \| Foreground.Disabled`	—	Foreground color. Defaults to default.
`id`	`string`	—	Element id.
`ref`	`Ref<HTMLElement>`	—	Ref to the rendered element.
`type`	`TextType.Subtitle \| TextType.SubtitleMedium \| TextType.BodyLarge \| TextType.BodyLargeEmphasis \| TextType.BodyMedium \| TextType.BodyMediumEmphasis \| TextType.Label \| TextType.Caption \| TextType.CaptionEmphasis \| TextType.Code1 \| TextType.Code2`	—	Chroma typography role. Defaults to body medium (13px).