Usage notes
- Use for user identity in lists, cards, and headers.
- Pair a clear name with a short descriptor.
- Keep the block compact to avoid line wraps.
Usage notes
- Use presence dots for realtime state (online, away, busy).
- Reserve offline for read-only or inactive states.
- Keep status meaning consistent across the product.
Usage notes
- Use in profile cards or centered layouts.
- Keep labels short to avoid stacked text.
- Pair with larger avatar size for emphasis.
Usage notes
- Use for teams, reviewers, or shared ownership.
- Show a count when more than three are visible.
- Keep the label aligned with the group.
Usage notes
- Small for compact lists or dense tables.
- Default for most UI and navigation.
- Large for emphasis in profile views.