import {RiverBreakoutTabs} from '@primer/react-brand'Examples
Default
Loading
Buttons in content
Place action buttons inside RiverBreakoutTabs.Content. They remain outside the desktop tab controls, so people can focus and activate them independently.
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 | |
backgroundVisual | ReactNode | Decorative aria-hidden visual behind the shared visual region; persists across tab changes. Must not contain interactive content | |
imagePosition | 'center' | 'block-end' | 'center' | Positions the media over backgroundVisual; block-end pins it to the bottom edge |
backgroundVisualFullBleed | boolean | false | When true, the backgroundVisual bleeds out to the gridline edges instead of being inset within them |
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 |
RiverBreakoutTabs.Visual extends River.Visual and supports all River.Visual props.