Breakpoint

Responsive preview scope.

Mobile

Viewport widths from 0px through 640px.

Tablet

Viewport widths from 641px through 1024px.

Desktop

Viewport widths from 1025px through 1919px.

Ultra-wide

Viewport widths from 1920px upward.

State

Visual or interaction state for a single interactive component.

normal

Base interactive state without simulated interaction.

hover

Pointer hover state.

focus

Programmatic or generic focused state.

focus-visible

Keyboard-visible focused state.

pressed

Mouse or touch active press state.

disabled

Unavailable state; value exists but cannot be used in the current context.

active

Currently selected prop value inside a prop control.

selected

Current item selection inside navigation-like components.

visited

Native link visited state.

linked

Item has a native navigation destination and renders as an anchor.

non-linked

Item has no navigation destination and renders as static content.

coming-soon

Item is planned but not yet available and remains visually alive.

Interaction

Simulated user interaction state for icon-only or nested interactive controls where State would be ambiguous.

normal

Base interactive state without simulated interaction.

hover

Pointer hover state.

focus

Programmatic or generic focused state.

focus-visible

Keyboard-visible focused state.

pressed

Mouse or touch active press state.

disabled

Unavailable state; value exists but cannot be used in the current context.

Selected

Boolean current-item marker for navigation-like components.

true

The item represents the currently selected page or section.

false

The item is available but not currently selected.

Level

Heading hierarchy level.

1, 2, 3, 4, 5

Heading levels; 1 is highest, 5 is lowest in the current scale.

Alignment

Text alignment along the inline axis.

left

Align text to the left edge.

center

Align text to the center.

right

Align text to the right edge.

Color

Semantic text-color emphasis selected from approved text tokens.

primary

Uses the primary text color token.

secondary

Uses the secondary text color token.

Weight

Supported text weight selected from approved typography tokens.

regular

Uses the regular font-weight token.

medium

Uses the medium font-weight token.

Disclosure

Expanded or collapsed visibility state for children.

expanded

Children or disclosed content are visible.

collapsed

Children or disclosed content are hidden.

Clickable

Whether a grouped navigation label is also a navigation target.

true

Boolean property is enabled.

false

Boolean property is disabled.

Inverse

Whether Preview uses its approved inverse background context.

false

Preview uses the base background token.

true

Preview uses the inverse background token.

Variant

Visual hierarchy or alternate presentation of the same component contract.

primary

Main or highest-emphasis variant in a local control group.

secondary

Supporting or lower-emphasis variant in a local control group.

Title

Primary visible title or heading text for a content-bearing component.

string

Human-readable title text supplied by the parent component or page.

Description

Optional supporting explanation text for a content-bearing component.

string

Human-readable supporting text supplied by the parent component or page.

Label

Short category, type, or metadata label for an item.

string

Compact label text such as Project, Note, or Artifact.

Status

Current availability or lifecycle text for an item.

string

Status text such as Available or Coming soon.

Href

Native anchor destination for navigation components.

URL/string

Destination supplied by the parent page or template.

Density

Spacing and packing intent for repeated layout or component composition.

comfortable

Roomier layout density with fewer items per row where space allows.

compact

Denser layout density with more items per row where space allows.

Accent

Approved accent identity used to derive interactive colors.

main

Primary blue accent identity.

alt

Alternate black accent identity.

Limit

Maximum number of items rendered by a repeated-content component.

number

Numeric cap supplied by the parent component or page.

Show Action

Boolean visibility control for a component-owned follow-up action.

false

Component hides its follow-up action.

true

Component renders its follow-up action.

Locale

Language and regional formatting context supplied by the application.

BCP 47/string

Locale identifier such as en-GB, ru-RU, or lv-LV.

Labels

Named visible and accessible copy supplied by a parent composition.

object

Component-scoped copy whose keys describe meaning rather than one language.