ant-design/components/tabs/index.en-US.md

category, group, title, description, cover, coverDark

category	group	title	description	cover	coverDark
Components	Navigation	Tabs	Tabs make it easy to explore and switch between different views.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8HMoTZUoSGoAAAAAAAAAAAAADrJ8AQ/original

When To Use

Ant Design has 3 types of Tabs for different situations.

• Card Tabs: for managing too many closeable views.
• Normal Tabs: for functional aspects of a page.
• Radio.Button: for secondary tabs.

Examples

Basic Disabled Centered Icon Indicator Slide Extra content Size Placement Card type tab Add & close tab Container of card type Tab Customized trigger of new tab Customized bar of tab Draggable Tabs Custom semantic dom styling Animated Nest component Token

API

Common props ref：Common props

Tabs

Property	Description	Type	Default	Version
activeKey	Current TabPane's key	string	-
addIcon	Customize add icon, only works with type="editable-card"	ReactNode	<PlusOutlined />	4.4.0
animated	Whether to change tabs with animation.	boolean | { inkBar: boolean, tabPane: boolean }	{ inkBar: true, tabPane: false }
centered	Centers tabs	boolean	false	4.4.0
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>(#semantic-dom)	-
defaultActiveKey	Initial active TabPane's key, if activeKey is not set	string	The key of first tab
hideAdd	Hide plus icon or not. Only works while type="editable-card"	boolean	false
indicator	Customize size and align of indicator	{ size?: number | (origin: number) => number; align: start | center | end; }	-	5.13.0
items	Configure tab content	TabItemType	[]	4.23.0
more	Customize the collapse menu	MoreProps	{ icon: <EllipsisOutlined /> , trigger: 'hover' }
removeIcon	The custom icon of remove, only works with type="editable-card"	ReactNode	<CloseOutlined />	5.15.0
popupClassName	className for more dropdown, please use classNames.popup instead	string	-	4.21.0
renderTabBar	Replace the TabBar	(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement	-
size	Preset tab bar size	large | middle | small	middle
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
tabBarExtraContent	Extra content in tab bar	ReactNode | {left?: ReactNode, right?: ReactNode}	-	object: 4.6.0
tabBarGutter	The gap between tabs	number	-
tabBarStyle	Tab bar style object	CSSProperties	-
tabPlacement	Placement of tabs	top | end | bottom | start	top
tabPosition	Position of tabs	top | right | bottom | left, please use tabPlacement instead	top
destroyInactiveTabPane	Whether destroy inactive TabPane when change tab, use destroyOnHidden instead	boolean	false
destroyOnHidden	Whether destroy inactive TabPane when change tab	boolean	false	5.25.0
type	Basic style of tabs	line | card | editable-card	line
onChange	Callback executed when active tab is changed	(activeKey: string) => void	-
onEdit	Callback executed when tab is added or removed. Only works while type="editable-card"	(action === 'add' ? event : targetKey, action) => void	-
onTabClick	Callback executed when tab is clicked	(key: string, event: MouseEvent) => void	-
onTabScroll	Trigger when tab scroll	({ direction: left | right | top | bottom }) => void	-	4.3.0

More option at @rc-component/tabs

TabItemType

Property	Description	Type	Default	Version
closeIcon	Customize close icon in TabPane's head. Only works while type="editable-card". 5.7.0: close button will be hidden when setting to null or false	ReactNode	-
destroyInactiveTabPane	Whether destroy inactive TabPane when change tab, use destroyOnHidden instead	boolean	false	5.11.0
destroyOnHidden	Whether destroy inactive TabPane when change tab	boolean	false	5.25.0
disabled	Set TabPane disabled	boolean	false
forceRender	Forced render of content in tabs, not lazy render after clicking on tabs	boolean	false
key	TabPane's key	string	-
label	Tab header text element	ReactNode	-
icon	Tab header icon element	ReactNode	-	5.12.0
children	Tab content element	ReactNode	-
closable	Whether a close (x) button is visible, Only works while type="editable-card"	boolean	true

MoreProps

Property	Description	Type	Default	Version
icon	The custom icon	ReactNode	-
DropdownProps

Semantic DOM

Design Token