import {RiverBreakoutTabs} from '@primer/react-brand'Examples
Default
Loading
With an optional background and inset media
Loading
Component props
RiverBreakoutTabs Required
| Name | Type | Default | Description |
|---|---|---|---|
children | RiverBreakoutTabs.Item[] | Includes one required RiverBreakoutTabs.A11yHeading and one or more items | |
defaultSelectedIndex | number | 0 | Default selected index for uncontrolled mode |
selectedIndex | number | Selected index for controlled mode | |
onChange | (selectedIndex: number) => void | Callback called when selected index changes |
RiverBreakoutTabs extends the HTML section element and supports all section props.
RiverBreakoutTabs.A11yHeading Required
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Screen reader label for the tabs group | |
as | 'h2' | 'h3' | 'h3' | Semantic heading level for assistive technologies |
id | string | Optional custom ID used for aria-labelledby relationships |
RiverBreakoutTabs.A11yHeading extends the Heading component.
RiverBreakoutTabs.Item Required
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement[] | Must include Heading, Content, and Visual | |
className | string | Optional custom class |
RiverBreakoutTabs.Item is a structural child component.
RiverBreakoutTabs.Heading Required
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Item heading text |
RiverBreakoutTabs.Heading extends the Heading component.
RiverBreakoutTabs.Content Required
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Item body and action |
RiverBreakoutTabs.Content extends the HTML div element and supports all div props.
RiverBreakoutTabs.Icon
| Name | Type | Default | Description |
|---|---|---|---|
icon | IconType | Octicon to render | |
color | 'green' | ... | 'green' | Icon color token |
RiverBreakoutTabs.Icon extends the Icon component.
RiverBreakoutTabs.Visual Required
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement | Item visual media | |
imageBackgroundColor | 'default' | 'subtle' | Optional background around visual |
RiverBreakoutTabs.Visual extends River.Visual and supports all River.Visual props.