Tab
Accessible tab navigation component with size variants, hover/focus states, and flexible content panels following Figma design specifications
Basic Usage
Simple Text Tabs
Ongoing Tasks
This panel shows all ongoing feedback requests and tasks.
- Review submitted feedback for John Doe
- Complete Q3 performance review
- Schedule feedback session with team
Basic tab navigation with string labels and flexible panel content
Controlled Tab with State
Ongoing Tasks
This panel shows all ongoing feedback requests and tasks.
- Review submitted feedback for John Doe
- Complete Q3 performance review
- Schedule feedback session with team
Current active tab index: 0
Tab component with controlled state and onChange callback
Size Variants
Size M (Default)
Overview content with summary information.
Default size with 18px top padding and 17px bottom padding for inactive tabs
Size S (Small)
Overview content with summary information.
Compact size with 10px top padding and 9px bottom padding for inactive tabs
States and Interactions
Disabled Tabs
This content is available to view.
Individual tabs can be disabled using the disabled property. Disabled tabs show grayed out text and cannot be selected.
Rich Content Examples
Complex Panel Content
Performance Dashboard
Active Reviews
12
Completed This Month
34
Tab panels can contain any React content including components, layouts, and interactive elements