Tabs

Tabs are used to categorise content into seperate views. A user can navigate between each section of content, displaying one section at a time.

import { ... } from '@ag.ds-next/react/tabs';

Usage

Tabs components can be imported via the tabs entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/tabs';

Tabs Props
Prop	Type	Description
activeIndex?	number	The index of the active tab.
background?	"body" \| "bodyAlt"Default: "body"	If this component is placed on a page with a `bodyAlt` background, set this to `bodyAlt`.
children?	ReactNode
contained?	booleanDefault: true	If `false`, the horizontal padding and borders will be removed.
onChange?	((activeIndex: number) => void)	Function to be called when the active tab index is changed.

TabList Props
Prop	Type	Description
children?	ReactNode

TabButton Props
Prop	Type	Description
children?	ReactNode
endElement?	ReactNode

TabPanels Props
Prop	Type	Description
children?	ReactNode

TabPanel Props
Prop	Type	Description
children?	ReactNode

You can view the full source code for this package on Github.