Logo

AueraUI

Docs

Components

Components

Tabs

A navigational component that organizes content into multiple sections

Logo
Manage your feed

Solid

Use the variant prop to change the visual style of the tabs.

Manage your feed

Tabs With Icon

Use the icon prop to add an icon to a TabHandle.

Manage your feed

Full Width

Use the fullWidth prop to make the tabs take up the full width.

Manage your feed
Manage your feed

Rounded

Use the rounded prop to give the tabs rounded edges.

Manage your feed

HideBorder

Use the hideBorder prop to the bottom border on line variant.

Manage your feed

Tabs

variant

Type:

"line" | "solid"

Defines the style of the tabs. The 'line' variant has an underline indicator, while 'solid' uses filled tabs.

Default:

line
mode

Type:

"light" | "dark"

Sets the theme mode for the tabs.

Default:

system
fullWidth

Type:

boolean

If true, makes the tabs take up the full width of their container.

Default:

false
className

Type:

string

Custom CSS class to style the tabs.

Default:

rounded

Type:

boolean

If true, applies rounded corners to the tabs.

Default:

false
panel

Type:

FunctionComponent

A custom component to be used as the panel. If not provided, the default `TabPanel` component will be used.

Default:

hideScrollBar

Type:

boolean

If true, hides the scrollbar when there are more tabs than can fit in the container.

Default:

false
hideBorder

Type:

boolean

If true, hides the bottom border. This only applies to the 'line' variant.

Default:

false
containerClass

Type:

string

Custom CSS class to style the container wrapping the tabs.

Default:

TabHandle

activeColor

Type:

ColorPair

The color to be applied when the tab is active.

Default:

blue-500
activeSolidColor

Type:

ColorPair

The color to be applied when the tab is active on `solid` variant.

Default:

black
inActiveColor

Type:

ColorPair

The color to be applied when the tab is inactive.

Default:

neutral-400
value

Type:

string

The unique identifier or value for the tab, typically used to track the selected tab.

Default:

disabled

Type:

boolean

If true, disables the tab, preventing interaction.

Default:

onClick

Type:

function

.

Default:

icon

Type:

ElementType

An optional icon component to be rendered in the TabHandle.

Default:

iconSize

Type:

number

The size of the icon in pixels.

Default:

16