Shimmer

API and Development

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

Import Shimmer, ShimmerBase from @prepared911/ui/shimmer. Renders an inline span. Takes the props below and data-* attributes; nothing else reaches the DOM.

Prop	Type	Default	Notes
`children`	`ReactNode`	required	The label, as copy
`type`	`TextType`	`BodyMedium`	Typography role of the label
`active`	`boolean`	`true`	Sweeps a highlight across the label
`base`	`ShimmerBase`	`Dim`	Resting tier: `Dim` or `Readable`
`icon`	`Glyph`		Leading glyph, decorative
`className`	`string`		Appended after the generated classes
`id`	`string`
`ref`	`Ref<HTMLSpanElement>`

Reserved design-system state names in data-* are dropped with a warning.

Exports

Shimmer, the enum ShimmerBase and the type ShimmerProps.

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	The label, such as "Thinking…". Copy from the caller.
`active`	`boolean`	`true`	Sweeps a highlight across the label while true. False renders the label as plain text at the subtle tier, in the same place, so toggling it moves nothing.
`base`	`ShimmerBase`	`ShimmerBase.Dim`	Tier the label rests at between sweeps. `Readable` keeps the label at AA text contrast while it sweeps, for a label someone reads (a streaming "Thinking…"); the default `Dim` is a loading placeholder under that floor.
`className`	`string`	—	Classes appended after the generated classes.
`icon`	`Glyph`	—	Leading glyph. It is decorative, stays when `active` is false, and sweeps in phase with the label.
`id`	`string`	—	Id of the root element.
`ref`	`Ref<HTMLSpanElement>`	—	Ref to the root element.
`type`	`TextType`	`TextType.BodyMedium`	Typography role of the label.

Storybook

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

DefaultOpens in a new tab

Shimmer / Usage

Shimmer / Accessibility

On this page

Exports

Props

Storybook

Shimmer

API and Development

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

Import Shimmer, ShimmerBase from @prepared911/ui/shimmer. Renders an inline span. Takes the props below and data-* attributes; nothing else reaches the DOM.

Prop	Type	Default	Notes
`children`	`ReactNode`	required	The label, as copy
`type`	`TextType`	`BodyMedium`	Typography role of the label
`active`	`boolean`	`true`	Sweeps a highlight across the label
`base`	`ShimmerBase`	`Dim`	Resting tier: `Dim` or `Readable`
`icon`	`Glyph`		Leading glyph, decorative
`className`	`string`		Appended after the generated classes
`id`	`string`
`ref`	`Ref<HTMLSpanElement>`

Reserved design-system state names in data-* are dropped with a warning.

Exports

Shimmer, the enum ShimmerBase and the type ShimmerProps.

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	The label, such as "Thinking…". Copy from the caller.
`active`	`boolean`	`true`	Sweeps a highlight across the label while true. False renders the label as plain text at the subtle tier, in the same place, so toggling it moves nothing.
`base`	`ShimmerBase`	`ShimmerBase.Dim`	Tier the label rests at between sweeps. `Readable` keeps the label at AA text contrast while it sweeps, for a label someone reads (a streaming "Thinking…"); the default `Dim` is a loading placeholder under that floor.
`className`	`string`	—	Classes appended after the generated classes.
`icon`	`Glyph`	—	Leading glyph. It is decorative, stays when `active` is false, and sweeps in phase with the label.
`id`	`string`	—	Id of the root element.
`ref`	`Ref<HTMLSpanElement>`	—	Ref to the root element.
`type`	`TextType`	`TextType.BodyMedium`	Typography role of the label.

Storybook

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

DefaultOpens in a new tab

Shimmer / Usage

Shimmer / Accessibility

On this page

Exports

Props

Storybook