Component Standards
Component standards ensure every UI element in your system is robust, accessible, and consistent. Explore anatomy, props, accessibility, states, and usage guidelines to create components that scale and serve diverse user needs.
Component Complexity Methodology
Our layered approach to component architecture ensures scalability, maintainability, and clear separation of concerns. Each layer has distinct responsibilities and characteristics that guide how components should be designed and implemented.
Component Layers Overview
Understanding the four-layer architecture: primitives, compounds, composers, and assemblies.
Explore Component Layers Overview →Standards Categories
Accessibility
Ensure every component meets accessibility requirements and best practices.
Explore Accessibility →States & Variants
Define and show all interactive states and visual variants.
Explore States & Variants →Usage Guidelines
Provide dos and don'ts, usage examples, and contextual recommendations.
Explore Usage Guidelines →Component Library
| Component | Description | Category | Documentation Status |
|---|---|---|---|
| Expand/collapse grouped sections. | Containers | Planned | |
Toolbar, Action-Bar | Groups actions with priority + overflow. | Actions | Planned |
Profile image, User Icon, User Image... | User representation (image/initials). | Display | Built |
Pill, Badge count, Bullet Badge... | Count/label indicator. | Feedback | Built |
Breadcrumbs (simple), Breadcrumb, Breadcrumbs (full) | Parent-child navigation trail. | Navigation | Built |
Action Button, Action Link, Chunky Buttons... | Clickable action element. | Actions | Built |
Asset card, Card Composable, Activation Card... | Grouped container with header/body/footer. | Display | Built |
Chart Container, Chart-Container | Frame for charts (not chart itself). | Data Visualization | Planned |
Checkbox Group, Checkbox Card, Checkbox Button... | Binary toggle control. | Inputs | Planned |
RadioGroup, Checkbox Group, Checkbox-Group... | Grouped options with label. | Inputs | Planned |
Tag | Label + optional dismiss. | Display | Planned |
Color Picker, Color-Picker | Input + palette. | Inputs | Planned |
Context Menu, Context-Menu, Action menu... | Right-click menu. | Actions | Planned |
Date Picker, Date-Picker, Appointment Picker... | Input + calendar popover. | Inputs | Planned |
Modal, Confirm Dialog, Feedback... | Blocking and non-blocking overlay container. | Containers | Built |
Separator | Visual separator. | Display | Built |
Sidebar, Bottom Sheet, Tray... | Sliding overlay. | Containers | Planned |
MenuButton, Menu Button, Menu-Button | Triggered list of actions. | Actions | Planned |
Field (Composer) | Governs label/error associations for controls. | Forms | Built |
File Input, File-Input | File picker + label. | Inputs | Planned |
Filter Bar, Filter-Bar | Toolbar specialized for filters. | Actions | Planned |
Form (Composer) | Orchestrates validation and submission. | Forms | Planned |
| Section title. | Textual | Planned | |
Symbol, Identicons, Icon tile... | Scalable glyph. | Display | Built |
Icon Button, Icon-Button, Button Icon... | Button containing only an icon. | Actions | Planned |
Image card, Picture card | Displays media. | Display | Built |
Input (Text, Number, Password), Text Input, Input field... | Single-line text entry. | Inputs | Built |
List Item, List-Item | Item with primary/secondary text and optional icon. | Display | Planned |
Loading-Overlay | Full-screen blocking state. | Feedback | Planned |
Mention-Picker | Autocomplete list for @ mentions. | Editing | Planned |
Dropdown, Menu Button, Menu-Button | Triggered list of actions. | Actions | Planned |
Message-Composer | Text input + attachments + formatting. | Editing | Planned |
Dialog, Timeout Modal, Modal dialog... | Blocking and non-blocking overlay container. | Containers | Planned |
Wizard, Multi-Step-Form | Multi-step field orchestration. | Forms | Planned |
Sidebar Nav, Navigation Rail, Navigation-Rail... | App-wide nav structure. | Navigation | Planned |
Content Pagination, Numbered pagination, Pagination nav... | Controls item/page navigation. | Navigation | Planned |
Anchor Popup, PointerBox | Anchored floating UI. | Containers | Built |
Progress Bar, Progress-Bar | Linear visual progress. | Feedback | Planned |
Radio Button, Radio button group, Radio button wrapper... | Single-choice option. | Inputs | Planned |
CheckboxGroup, Checkbox Group, Checkbox-Group... | Grouped options with label. | Inputs | Planned |
Rich-Text-Editor, Wysiwyg, Messagebox... | Schema + plugins + toolbar orchestration. | Editing | Planned |
Search Field, Search-Field | Input + search icon + clear button. | Inputs | Planned |
ToggleGroup, Segmented Control, Segmented-Control... | Group of related toggle buttons. | Actions | Planned |
Dropdown, Dropdown select, Dropdown menu nav... | Dropdown (native/custom). | Inputs | Built |
Drawer | Sliding overlay. | Containers | Built |
NavigationRail, Navigation Rail, Navigation-Rail... | App-wide nav structure. | Navigation | Planned |
| Continuous or stepped numeric input. | Inputs | Planned | |
Toast | Temporary notifications. | Feedback | Planned |
| Non-semantic layout gap. | Display | Planned | |
| Indeterminate loading indicator. | Feedback | Built | |
Input stepper, Progress stepper, Steps... | Multi-step progress indicator. | Navigation | Planned |
Slide toggle, Toggle switch, ToggleSwitch... | Binary toggle styled as a slider. | Inputs | Built |
Table Row, Table-Row | Standardized table row. | Display | Planned |
Tab | Tablist + tabpanels orchestration. | Navigation | Built |
Chip, Token, Tagbutton... | Label + optional dismiss. | Display | Planned |
Specialized text | Styled body copy. | Textual | Built |
Textarea Field, Textarea-Field | Multiline entry. | Inputs | Planned |
Text Field, Text-Field | Input + Label + Error + Helper. | Inputs | Built |
Snackbar | Temporary notifications. | Feedback | Built |
SegmentedControl, Segmented Control, Segmented-Control... | Group of related toggle buttons. | Actions | Planned |
Action Bar, Action-Bar, Top Bar... | Groups actions with priority + overflow. | Actions | Built |
Toggle tip, Toggletip, Tool tip... | On-hover/focus info. | Feedback | Built |
Multi-Step Form, Multi-Step-Form, Multi-step Form | Multi-step field orchestration. | Forms | Planned |