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 →Component Status Matrix
View the status, documentation, and implementation details of all components in the design system.
Explore Component Status Matrix →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 |
|---|---|---|---|
| Vertically stacked sections that expand/collapse to reveal content. Supports single or multi-panel open modes. | Containers | Built | |
Toolbar, Action-Bar | Groups actions with priority + overflow. | Actions | Planned |
| Inline notification banner for important messages. Does not require user interaction to dismiss. | Display | Built | |
| Inline alert message communicating status, errors, warnings, or success. Always visible (not triggered by user interaction). | Display | Built | |
| A card component that animates into view when it enters the viewport. | Display | Built | |
| A page section that fades and slides into view when it enters the viewport. | Display | Built | |
| Text that animates character-by-character or line-by-line into view on scroll. | Display | Built | |
| Constrains its child to a fixed aspect ratio (e.g. 16:9) regardless of container width. | Containers | Built | |
Profile image, User Icon, User Image... | Circular user or entity representation showing an image, initials, or icon fallback. | Display | Built |
Pill, Badge count, Bullet Badge... | Small label conveying status, category, or count. Typically paired with other content. | Feedback | Built |
| Styled blockquote for displaying cited passages or testimonials. | Textual | Built | |
| Navigation control for switching between Qualtrics brands or product lines. | Navigation | Built | |
Breadcrumbs (simple), Breadcrumb, Breadcrumbs (full) | Navigation landmark showing the current page location within a site hierarchy. | Navigation | Built |
Action Button, Action Link, Chunky Buttons... | Clickable element for triggering actions. Supports multiple visual variants and semantic intents. | Actions | Built |
| Interactive calendar grid for selecting a single date or a date range. | Inputs | Built | |
Asset card, Card Composable, Activation Card... | Surface container grouping related content with optional header, media, and action areas. | Display | Built |
Chart Container, Chart-Container | Frame for charts (not chart itself). | Data Visualization | Planned |
Checkbox Group, Checkbox Card, Checkbox Button... | Binary or tri-state input for boolean selection. Supports indeterminate state for partial group selection. | Inputs | Built |
RadioGroup, Checkbox Group, Checkbox-Group... | Grouped options with label. | Inputs | Planned |
Tag | Compact interactive element for tags, filters, or multi-select choices. | Display | Built |
Color Picker, Color-Picker | Input + palette. | Inputs | Planned |
| Command palette modal for keyboard-driven search and action execution. | Actions | Built | |
Context Menu, Context-Menu, Action menu... | Right-click menu. | Actions | Planned |
Date Picker, Date-Picker, Appointment Picker... | Input + calendar popover. | Inputs | Planned |
| Disclosure widget revealing additional content on demand. Semantically equivalent to <details>/<summary>. | Textual | Built | |
Modal, Confirm Dialog, Feedback... | Modal overlay requiring user attention before returning to the page. Traps focus until dismissed. | Containers | Built |
Separator | Visual separator between content sections. Renders as an hr or div depending on orientation. | Display | Built |
Sidebar, Bottom Sheet, Tray... | Sliding overlay. | Containers | Planned |
MenuButton, Menu Button, Menu-Button | Triggered list of actions. | Actions | Planned |
Field (Composer) | Form field layout wrapper that pairs a label, input, and optional hint or error message. | 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... | Renders a named SVG icon from the design system icon set. | Display | Built |
Icon Button, Icon-Button, Button Icon... | Button containing only an icon. | Actions | Planned |
Image card, Picture card | Responsive image component wrapping Next.js Image with layout and aspect-ratio helpers. | Display | Built |
Input (Text, Number, Password), Text Input, Input field... | Native text input with portfolio-specific styling. Use inside TextField for label and error support. | Inputs | Built |
| Accessible form label associated with a control via htmlFor. | Inputs | Built | |
| Styled anchor links with design-system typography and color variants. | Navigation | Built | |
| Semantic list element (ul, ol, or dl) with consistent spacing and marker styles. | Containers | 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 |
| One-time password input composed of individual single-character digit fields. | Inputs | Built | |
| Wraps page content to apply route-change fade/slide animations between Next.js pages. | Display | Built | |
Content Pagination, Numbered pagination, Pagination nav... | Controls item/page navigation. | Navigation | Planned |
Anchor Popup, PointerBox | Non-modal floating panel anchored to a trigger element. Does not trap focus. | Containers | Built |
| Social-media-style post card with author, content, media embed, and engagement stat slots. | Textual | Built | |
| Avatar-style display of a user or entity identity with name and optional status badge. | Display | Built | |
| Visual indicator for task completion. Supports linear bar and circular ring variants. | Display | 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 selector with optional search, single or multi-select, and keyboard navigation. Renders a floating listbox anchored to the trigger. | Inputs | Built |
| Slide-in panel (drawer) that overlays the page from an edge. Traps focus until dismissed. | Feedback | Built | |
| Expandable container that truncates long content with a "show more" affordance. | Textual | Built | |
| Dual-listbox transfer widget for moving items between two ordered collections. | Actions | Built | |
Drawer | A layout component for creating collapsible sidebar navigation with support for different positions and responsive behavior. | Containers | Built |
NavigationRail, Navigation Rail, Navigation-Rail... | App-wide nav structure. | Navigation | Planned |
| Headless navigation container that orchestrates expanded/collapsed state and provides context for nested navigation items. | Display | Built | |
| Loading placeholder that mimics the shape of content before data is available. | Display | Built | |
| Continuous or stepped numeric input. | Inputs | Planned | |
| Animated custom cursor indicator following the pointer with a spring-physics trail. | Display | Built | |
Toast | Temporary notifications. | Feedback | Planned |
| Non-semantic layout gap. | Display | Planned | |
| Rotating indicator for indeterminate loading states. | Feedback | Built | |
| Compact icon-and-label pair conveying a status condition (online, offline, busy, etc.). | Display | Built | |
Input stepper, Progress stepper, Steps... | Multi-step progress indicator. | Navigation | Planned |
Slide toggle, Toggle switch, ToggleSwitch... | Boolean toggle for enabling or disabling a setting. Semantically equivalent to a checkbox but with a sliding thumb affordance. | Inputs | Built |
| Data table with sortable columns, row selection, and pagination support. | Display | Built | |
Table Row, Table-Row | Standardized table row. | Display | Planned |
Tab | Tabbed navigation for switching between related content panels within the same page context. | Navigation | Built |
Chip, Token, Tagbutton... | Label + optional dismiss. | Display | Planned |
Specialized text | Polymorphic text element with design-system typography variants and semantic element control. | Textual | Built |
Textarea Field, Textarea-Field | Multiline entry. | Inputs | Planned |
Text Field, Text-Field | Full-featured form field composing Label, Input, description, and error message with ARIA wiring. | Inputs | Built |
Snackbar | Transient notification message appearing briefly at the edge of the viewport. | Feedback | Built |
SegmentedControl, Segmented Control, Segmented-Control... | Group of related toggle buttons. | Actions | Planned |
| Binary switch control rendered as input[role=switch] with an adjacent label. | Inputs | Built | |
Action Bar, Action-Bar, Top Bar... | Editor command surface that groups formatting, alignment, color, insertion, and history actions for a TipTap editor instance. | Actions | Built |
Toggle tip, Toggletip, Tool tip... | Floating label providing supplemental information about a trigger element on hover or focus. | Feedback | Built |
| Clamps multi-line text to a fixed number of lines with an expand/collapse toggle. | Display | Built | |
| Renders children invisibly for sighted users but accessible to screen readers. Equivalent to .sr-only. | Containers | Built | |
| Step-by-step guided tour overlay anchored to page elements. Manages step progression and keyboard navigation. | Feedback | Built | |
Multi-Step Form, Multi-Step-Form, Multi-step Form | Multi-step field orchestration. | Forms | Planned |