Component Overview

All Components

DS0 provides a comprehensive set of accessible, well-tested components organized into categories.

Actions

• Button — Triggers an action
• IconButton — Icon-only action button
• Toggle — Toggles between on/off states
• ToggleGroup — Grouped toggle buttons

Data Input

• TextField — Single-line text input
• TextArea — Multi-line text input
• Select — Dropdown selection
• Checkbox — Boolean or multi-option selection
• RadioGroup — Single selection from a group
• Switch — Toggle on/off setting
• Slider — Range value selection
• Form — Form validation and submission

Data Display

• Badge — Status indicator or count
• Avatar — User or entity image
• Card — Contained content surface
• Table — Tabular data display
• Accordion — Expandable content sections

Feedback

• Alert — Inline contextual messages
• Toast — Temporary notifications
• Progress — Progress indication
• Spinner — Loading indicator
• Skeleton — Content placeholder

Layout

• Stack — Vertical/horizontal flex layout
• Grid — CSS grid layout
• Container — Max-width wrapper
• Divider — Visual separator
• AspectRatio — Fixed aspect ratio container

Navigation

• Tabs — Tab-based navigation
• Breadcrumb — Navigation breadcrumb trail
• Pagination — Page navigation
• Link — Styled anchor element

Overlay

• Dialog — Modal dialog
• Popover — Contextual popup
• Tooltip — Hover information
• Drawer — Sliding side panel

Typography

• Heading — Semantic heading element
• Text — Body text element
• Label — Form label element
• Code — Code snippet display