Features
- Tab items can be either buttons or links.
- Allows showing a count next to tab items.
- Can be controlled or uncontrolled.
Examples
With disabled tab
Making a tab disabled can be a useful design approach in situations where certain tabs should not be accessible or selectable by the user. Reasons for making a tab disabled include incomplete content, user permissions, contextual relevance, and user flow guidance.
With tab links
By default, tab triggers will be button elements. But links can also be used by nesting nesting a link element within the trigger as passing an asChild prop to the trigger itself. Whether or not you should use links or buttons depends on the task at hand.
With tab counters
A count can be shown next to the text of a tab to provide users with additional information about the contents of the tab. Showing a count can also add visual interest and help users differentiate between tabs more easily.
Accessibility
Adheres to the Tabs WAI-ARIA design pattern. See Radix documentation for details.
Related components
- Filter menu: A component used to apply category-specific filters for a dataset.
- Radio group: A form element that allow users to select an single option from a list of at least two options.
- Segmented control: A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.