Display and data widgets
Display and data widgets are the surfaces you reach for after state flow and layout are already clear.
Their job is usually to present information, status, metrics, or structured records. Some of them are purely visual. Others are semantically rich and matter for testing and accessibility because they expose meaning, values, or structure.
Text, iconography, and small display surfaces
| Widget | Dedicated page | When to choose it |
|---|---|---|
Text | Text | Basic textual content |
TextContent | TextContent | Literal or keyed text payload |
RichText | RichText | Mixed-style text content |
RichTextRun | RichTextRun | Supporting rich-text run type |
TextRunStyle | TextRunStyle | Supporting rich-text style type |
TextFontStyle | TextFontStyle | Supporting text-style type |
Icon | Icon | Iconographic content |
Avatar | Avatar | Identity or profile presentation |
Badge | Badge | Small status label |
Tag | Tag | Categorical chip or label |
Link | Link | Link-style display surface |
Code | Code | Code or preformatted text display |
Kbd | Kbd | Keyboard shortcut presentation |
Framing, messaging, and status surfaces
| Widget | Dedicated page | When to choose it |
|---|---|---|
Card | Card | Group related content inside a framed surface |
Divider | Divider | Separate content visually |
Alert | Alert | Communicate notable inline status or warning |
AlertKind | AlertKind | Supporting alert style type |
EmptyState | EmptyState | Explain absence of content |
ProgressBar | ProgressBar | Show determinate linear progress |
CircularProgress | CircularProgress | Show circular progress |
Spinner | Spinner | Show indeterminate activity |
Skeleton | Skeleton | Reserve visual structure during loading |
Stat | Stat | Present one labeled metric clearly |
Stepper | Stepper | Show multi-step progress or flow |
Structured and repeated data widgets
| Widget | Dedicated page | When to choose it |
|---|---|---|
Calendar | Calendar | Calendar-style structured dates |
DataTable | DataTable | Row-and-column data presentation |
TableColumn | TableColumn | Supporting column definition |
TableRow | TableRow | Supporting row definition |
Timeline | Timeline | Chronological progression |
TimelineItem | TimelineItem | One timeline entry |
TreeView | TreeView | Hierarchical data display |
TreeItem | TreeItem | One tree node |
Practical cross-reference
If the next question is really about layered interface or navigation rather than display, continue to Overlays and navigation. If the next question is about media or host-backed surfaces, continue to Media. For the overall map, return to the Widget catalog.