Skip to main content

Tabs

Loading...
import { Tabs } from "@nudge-coach/ui";

Overview​

The tabs component is used to navigate pages of content.

Props​

tabs​

Tab[] An array of tabs.

export interface Tab {
  id: string;
  content: React.ReactNode;
}

selected​

A string which indicates which tab is currently selected.

Loading...
<Tabs
  selected="0"
  tabs={[
    { id: "0", content: "Tab 1" },
    { id: "1", content: "Tab 2" },
    { id: "2", content: "Tab 3" },
  ]}
/>

tabSelected​

(id) => {} A callback when a tab is clicked.

expanded​

A boolean that expands the tabs to fill the container.

Loading...
<Tabs
  expanded
  selected="0"
  tabs={[
    { id: "0", content: "Tab 1" },
    { id: "1", content: "Tab 2" },
    { id: "2", content: "Tab 3" },
  ]}
/>

highlighted​

The ID of a tab as a string that highlights the tab, prompting the user to make that selection. This is generally only used during onboarding.

Loading...
<Tabs
  expanded
  selected="0"
  highlighted="1"
  tabs={[
    { id: "0", content: "Tab 1" },
    { id: "1", content: "Tab 2" },
    { id: "2", content: "Tab 3" },
  ]}
/>

margin​

A boolean that adds standard space around the tabs.

Loading...
<Tabs
  margin
  selected="0"
  tabs={[
    { id: "0", content: "Tab 1" },
    { id: "1", content: "Tab 2" },
    { id: "2", content: "Tab 3" },
  ]}
/>