Components
Every component in the pack, on the pack’s tokens, each with a live preview, a usage sample and when to use it. New here? Start with Installation.
Actions
Text fields
Choice controls
Pickers
Feedback
Display
- CardGroups one record or topic on a surface.
- BadgeA short static label in one of seven variants.
- AvatarA person's picture, with initials as a fallback.
- SeparatorA 1px line between groups.
- Aspect RatioHolds media at a fixed shape.
- ItemOne row in a list: media, text and actions.
- TableRows of records in real table markup.
Typography
Disclosure & layout
Navigation
Overlays
- DialogA modal window for a focused task.
- Alert DialogConfirms an action that can't be undone.
- SheetA panel from an edge of the screen.
- DrawerA bottom sheet for a short task on a phone.
- PopoverA small panel anchored to its trigger.
- Hover CardA preview of where a link goes.
- TooltipA visual label for an icon-only button.
- Dropdown MenuActions behind a button.
- Context MenuActions at the pointer, on right click or long press.
Data & media
Conversation
- MessageOne turn in a conversation.
- BubbleThe speech bubble for a message's text.
- AttachmentA file on a message, with its upload state.
- MarkerA note in a conversation that isn't a message.
- Message ScrollerA conversation's scrolling list that follows new messages.
- TraceThe steps an agent took, each with its status.
- QuestionnaireA few short questions asked one at a time.