Tabs - Keep React

The Tab Group Component in the Keep React allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container. With customizable options for size, type, and status, you can create versatile and visually appealing tab groups that align with your design aesthetic.

Default Tabs#

The default Tabs component presents a collection of pills style button that include both tab elements and corresponding tab content.

Profile content

Bordered Tabs#

By setting borderPosition="top", you can make the border appear at the top of the tab group. Conversely, setting borderPosition="bottom" will cause the border to appear at the bottom of the tab group.

Profile content

Tabs with Icon#

Tabs items with icons are a user interface design element where each tab in a tabbed navigation system is accompanied by an icon. You can change the icon position by using iconPosition props as "right" | "left".

Profile content

Tab Notifications#

Keep users informed by adding notifications to tabs. Utilize badges to indicate new or important content.

Inbox content

Tabs API Reference#

Explore the available props for the <Tabs> component

Property	Description	Type	Default
style	Specifies the style variant of the tabs.	default underline pills	default
iconPosition	Determines whether icons appear on the left or right side of tab labels.	left right	left
borderPosition	Sets the position of a border line within the Tabs component.	top bottom	bottom
onActiveTabChange	Callback for handling active tab changes.	function	()=>void

Tabs Items API Reference#

Explore the available props for the <Tabs.Item> component

Property	Description	Type	Default
title	The title of the tab item.	ReactNode	Profile
active	Determines whether the tab item is active.	boolean	false
disabled	Determines whether the tab item is disabled.	boolean	false
icon	The icon to display with the tab item.	ReactNode	None
notification	Notification content for the tab item.	number string	number
notificationColor	The color of the notification for the tab item.	error gray info success warning	info