Import
import { Tabs } from '@adoptaunabuelo/react-components';
Usage
<Tabs
design="secondary"
options={[
{ id: "1", title: "Overview" },
{ id: "2", title: "Details" }
]}
selectedOption={currentTab}
onChange={(tab) => setCurrentTab(tab)}
/>
Props
options
Array<OptionProps>
required
Array of tab options
Visual design: primary (underline) or secondary (rounded background)
Currently selected tab (controlled component)
onChange
(option: OptionProps) => void
Callback fired when tab selection changes
Custom styles for the tabs container
Custom styles for individual tab cells
Custom styles for tab text labels
Background color for selected tab (secondary design)
Text color for selected tab
Background color for the entire tabs container
OptionProps
Unique identifier for the tab
Features
Primary Design
- Height: 36px
- Underline indicator (2px solid) on selected tab
- 16px gap between tabs
- Medium weight font
Secondary Design
- Rounded pill shape (32px border radius)
- Background color change on selection
- 7px vertical, 16px horizontal padding
- Smooth hover effects (0.15s ease-in transition)
- 4px gap between tabs
Examples
Primary Design (Underline)
const [activeTab, setActiveTab] = useState({ id: '1', title: 'Home' });
<Tabs
design="primary"
options={[
{ id: '1', title: 'Home' },
{ id: '2', title: 'Profile' },
{ id: '3', title: 'Settings' }
]}
selectedOption={activeTab}
onChange={(tab) => setActiveTab(tab)}
/>
Secondary Design (Rounded Background)
import { ColorV2 } from '@adoptaunabuelo/react-components';
<Tabs
design="secondary"
options={[
{ id: 'overview', title: 'Overview' },
{ id: 'details', title: 'Details' },
{ id: 'activity', title: 'Activity' }
]}
selectedOption={currentTab}
onChange={setCurrentTab}
cellColor={ColorV2.surface.primarySoft}
textColor={ColorV2.text.primary}
/>
Custom Colors
import { ColorV2 } from '@adoptaunabuelo/react-components';
<Tabs
design="primary"
options={tabs}
selectedOption={selected}
onChange={setSelected}
cellColor={ColorV2.surface.green}
textColor={ColorV2.text.green}
/>
With Custom Styling
<Tabs
design="secondary"
options={[
{ id: '1', title: 'Tab 1' },
{ id: '2', title: 'Tab 2' }
]}
selectedOption={active}
onChange={setActive}
style={{ padding: '8px', backgroundColor: '#F9F6F3' }}
cellStyle={{ minWidth: '100px' }}
textStyle={{ fontWeight: 600 }}
/>
