| Name | Type | Description | Default |
|---|---|---|---|
Required children | React.ReactNode | Contains one or more DxcTabs.Tab. | - |
| iconPosition | 'top' | 'left' | Whether the icon should appear above or to the left of the label. | 'left' |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
| tabIndex | number | Value of the tabindex attribute applied to each tab. | 0 |
Single tab, part of the set of Tabs.
| Name | Type | Description | Default |
|---|---|---|---|
| active | boolean | Whether the tab is active or not. | false |
Required children | React.ReactNode | Contains the component to be rendered when this tab is active. | - |
| defaultActive | boolean | Whether the tab is active or not by default, but mantaining the uncontrolled behaviour. | false |
| disabled | boolean | If true, the tab will be disabled. | false |
| icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | Material Symbol name or SVG element as the icon that will be displayed in the tab. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_". The icon or the label, either of which must have a valid value. | - |
label | string | Tab label text. The icon or the label, either of which must have a valid value. | - |
| notificationNumber | boolean | number | If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a number is specified, the component will display a badge with the value as its label. Take into account that if that number is greater than 99, it will appear as +99 in the badge. | false |
| onClick | () => void | This function will be called when the user clicks on this tab. This feature is mostly recommended for compatibility with third-party routing APIs. | - |
| onHover | () => void | This function will be called when the user hovers this tab. | - |
| tabId | string | Value used to identify the tab internally. | - |
title | string | Tooltip text for the tab. | - |
Important — Each tab must have either
tabId or label defined for the component to function correctly.() => { const [selectedTab, setSelectedTab] = useState("Mail"); return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcTabs> <DxcTabs.Tab tabId="Mail" label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}> <></> </DxcTabs.Tab> <DxcTabs.Tab tabId="Calendar" label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}> <></> </DxcTabs.Tab> <DxcTabs.Tab tabId="Contacts" label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}> <></> </DxcTabs.Tab> </DxcTabs> </DxcInset> ); }
() => { return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcTabs> <DxcTabs.Tab tabId="Mail" label="Mail" defaultActive> <></> </DxcTabs.Tab> <DxcTabs.Tab tabId="Calendar" label="Calendar"> <></> </DxcTabs.Tab> <DxcTabs.Tab tabId="Contacts" label="Contacts"> <></> </DxcTabs.Tab> </DxcTabs> </DxcInset> ); }
() => { const mobileIcon = ( <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor" > <g> <path d="M0,0h24v24H0V0z" fill="none" /> </g> <g> <g> <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" /> </g> </g> </svg> ); return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcTabs> <DxcTabs.Tab tabId="Mobile" icon={mobileIcon} notificationNumber> <></> </DxcTabs.Tab> <DxcTabs.Tab tabId="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled> <></> </DxcTabs.Tab> <DxcTabs.Tab tabId="Wifi" icon="wifi" notificationNumber={120}> <></> </DxcTabs.Tab> </DxcTabs> </DxcInset> ); }