Tabs component

Tabs organize content across different screens and makes it easy to explore and switch between them.

BigDog was a dynamically stable quadruped military robot created in 2005 by Boston Dynamics (now owned by SoftBank Group) with Foster-Miller, the NASA Jet Propulsion Laboratory, and the Harvard University Concord Field Station.

Properties


Name	Description	Default
actions	Custom content controls displayed on the right side of Tab list	-
activeTab	Current active tab index	-
gap	Flexbox gap size	-
setActiveTab	Set current active tab by it's index, ommit to make Tabs uncontrolled	-

Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.

Controlled Tabs

Tabs can be used as uncontrolled component by using the `Tabs.Panel` components for content, or as a controlled component by defining the active tab state properties.

Current active tab: 1

Tab Badges

To indicate status or highlight featured content, the `badgeLabel` property can be used.

The `withError` prop can be used to display an error indicator for a Tab

Finished process runs

Tab Hash

If direct access to a specific tab is requried on page load, the `Tab` component can be defined as a anchor element via `forwaredAs='a'` and the hash defined as `href` attribute. Note that the hashes need to be unique in a single view to work properly.

All processes

Active process runs

Finished process runs

All processes table

Tab Nesting

In specific cases where `Tab` and `Panel` components cannot be defined as direct children of the `Tabs` component, the `index` property can be manually defined for each tab and panel.

To provide the correct style and aria roles, the `Tab.List` component should be used to wrap the `Tabs.Tab` components.

All processes table

Tab Controls

Custom action controls can be defined via the prop `actions` that will be displayed on the right side of the tab list

All processes table