Core Components
The most frequently used interactive elements: Buttons and semantic Badges.
Avatar
Avatars represent users or entities. The c-avatar class defines the
DNA (shape, alignment, typography), while size variants and patterns extend the
component for real product use.
Avatar Sizes
Sizes scale using spacing tokens for perfect circles.
Avatar with Image
Use an image inside the avatar for profile photos.
Avatar with Initials
Fallback initials when no profile image is available.
Avatar Group
Overlapping avatars to represent teams or shared ownership.
Avatar with Status
Presence indicator for online/offline status.
Avatar + Name (User Menu)
Common pattern for account menus and profile sections.
Buttons
Buttons execute actions. The `c-button` class defines the DNA (padding, font, reset), while `pb-btn-*` classes define the visual variant.
Primary & Secondary Button Groups
Min-width enforced to 9x base font. Gap enforced to 0.25rem via .c-button-group.
Text & System Icon Buttons
Button Sizes
Sizes scale precisely to 16px (sm), 18px (default), and 20px (lg).
Badges
Small status indicators, typically used in tables or next to titles.
Language Switchers
Used to toggle between different locale or language views.