Tabs
Move between sections of one page. The indicator slides to the selected tab.
Summary
Bookings
Catalog
Schedule
Staff
Underline variant
For dense pages, or when the tabs sit on the page divider.
Summary
Bookings
Catalog
Summary content.
Usage
import { Tabs } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Equal sections within one page.
When not to use
- Sequential steps. Use Stepper.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { key, label, content?, badge?, isDisabled? }[] | required | |
label | string | required | |
variant | 'pill' | 'underline' | 'pill' | |
size | 'md' | 'lg' | 'md' | |
selectedKey, defaultSelectedKey, onSelectionChange | string, string, (key) => void | - |
Accessibility
- Arrow keys move between tabs; Tab moves into the panel.