Tabs

Quick start

Here's a quick start guide to get started with the Tabs component

Importing Component

import { Tabs } from "@hover-design/react";

Code Snippets and Examples

Tabs Default

const tabsData = [
  {
    label: "First",
    value: "first"
  },
  {
    label: "Second",
    value: "second",
    disabled: true
  },
  {
    label: "Third",
    value: "third",
    icon: <FiArrowRightCircle />
  },
  {
    label: "Fourth",
    value: "fourth",
    icon: <FiCpu />,
    badge: "13"
  }
];

<div className="App">
  <Tabs defaultValue={"first"} tabsData={tabsData}>
    {(selectedTab) => <div>{selectedTab.label}</div>}
  </Tabs>
</div>;

(selectedTab) contains the whole tab object which is selected.

First

Second

Third

Fourth13

Tabs Vertical

const tabsData = [
  {
    label: "First",
    value: "first"
  },
  {
    label: "Second",
    value: "second",
    disabled: true
  },
  {
    label: "Third",
    value: "third",
    icon: <FiArrowRightCircle />
  },
  {
    label: "Fourth",
    value: "fourth",
    icon: <FiCpu />,
    badge: "13"
  }
];

<div className="App">
  <Tabs
    defaultValue={"first"}
    tabSize={"200px"}
    textAlign={"left"}
    orientation={"vertical"}
    tabsData={tabsData}
  >
    {(selectedTab) => <div>{selectedTab.label}</div>}
  </Tabs>
</div>;

(selectedTab) contains the whole tab object which is selected.

First

Second

Third

Fourth13

Tabs Variants - Outline

const tabsData = [
  {
    label: "First",
    value: "first"
  },
  {
    label: "Second",
    value: "second",
    disabled: true
  },
  {
    label: "Third",
    value: "third",
    icon: <FiArrowRightCircle />
  },
  {
    label: "Fourth",
    value: "fourth",
    icon: <FiCpu />,
    badge: "13"
  }
];

<div className="App">
  <Tabs defaultValue={"first"} variant={"outline"} tabsData={tabsData}>
    {(selectedTab) => <div>{selectedTab.label}</div>}
  </Tabs>
</div>;

(selectedTab) contains the whole tab object which is selected.

First

Second

Third

Fourth13

Tabs Variants - Pill

const tabsData = [
  {
    label: "First",
    value: "first"
  },
  {
    label: "Second",
    value: "second",
    disabled: true
  },
  {
    label: "Third",
    value: "third",
    icon: <FiArrowRightCircle />
  },
  {
    label: "Fourth",
    value: "fourth",
    icon: <FiCpu />,
    badge: "13"
  }
];

<div className="App">
  <Tabs defaultValue={"first"} variant={"pill"} tabsData={tabsData}>
    {(selectedTab) => <div>{selectedTab.label}</div>}
  </Tabs>
</div>;

(selectedTab) contains the whole tab object which is selected.

First

Second

Third

Fourth13

Controlled Tabs

const [activeTab, setActiveTab] = useState("first");

const tabsData = [
  {
    label: "First",
    value: "first"
  },
  {
    label: "Second",
    value: "second",
    disabled: true
  },
  {
    label: "Third",
    value: "third",
    icon: <FiArrowRightCircle />
  },
  {
    label: "Fourth",
    value: "fourth",
    icon: <FiCpu />,
    badge: "15"
  }
];

<div className="App">
  <Tabs
    value={activeTab}
    onChange={(selectedTab) => setActiveTab(selectedTab.value)}
    value
    tabsData={tabsData}
  >
    {(selectedTab) => <div>{selectedTab.label}</div>}
  </Tabs>
</div>;

(tabsData) contains the whole tab object which is selected.

First

Second

Third

Fourth13

Props Reference

Attributes	Values	Default Value	Optional ?
defaultValue	must be equal to value from Tabs Object string | number		Yes
value	must be equal to value from Tabs Object string | number		Yes
orientation	horizontal | vertical	horizontal	Yes
variant	default | outline | pill	default	Yes
color	string	#2F80ED	Yes
backgroundColor	string	#d7e9ff	Yes
outlineColor	string	#EBECF0	Yes
textAlign	left | center| right	center	Yes
roundness	string	4px	Yes
onChange	(selectedTabObject)=>void	()=>{}	Yes
grow	grows to fit the containter boolean	false	Yes
size	height for horizontal & width for vertical string	40px	Yes
tabsData	Array of Tabs Object		No
children	not a prop but children to the <Tabs/> (selectedTabObject)=> JSX		No

Tabs Object

Key	type	Optional ?
label	string	No
value	string | number	No
icon	JSX Element	Yes
disabled	boolean	Yes
badge	string | JSX Element	Yes
ref	MutableRefObject<HTMLDivElement>	Yes

Keyboard Controls

Keyboard controls will only work when the Tab is focused (selected)

Key	type	Orientation
ArrowRight	Next Tab	horizontal
ArrowLeft	Previous Tab	horizontal
ArrowDown	Next Tab	vertical
ArrowUp	Previous Tab	vertical
Home	if not disabled First Tab	both
End	if not disabled Last Tab	both