1. Components
  2. Tab

<Tab />

Tabs is a classic UI navigation pattern for dividing related content and interactions.
The usage of aria attributes is important in order for people using screen readers to get a good experience. When using TypeScript, Sanity UI enforces the usage of the correct aria attributes.

Usage  

<Tab />  

Properties  

aria-controls: string
id: string
icon?: React.ComponentType | React.ReactNode
focused?: boolean
label?: React.ReactNode
selected?: boolean
tone?: 'default' | 'primary' | 'positive' | 'caution' | 'critical'

<TabList />  

Properties  

as?: React.ElementType | keyof JSX.IntrinsicElements
children?: React.ReactElement[]
space?: number | number[]

<TabPanel />  

Properties  

aria-labelledby: string
as?: React.ElementType | keyof JSX.IntrinsicElements
id: string

Made withby folks at