logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
Examples
Basic
Disabled
Centered
Icon
Indicator
Slide
Extra content
Size
Position
Card type tab
Add & close tab
Customized trigger of new tab
Customized bar of tab
Draggable Tabs
API
Tabs
TabItemType
Design Token

Tabs

  • TableTag

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Tabs make it easy to switch between different views.

    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

    API

    Common props ref:Common props

    Tabs

    PropertyDescriptionTypeDefaultVersion
    activeKeyCurrent TabPane's keystring-
    addIconCustomize add iconReactNode-4.4.0
    animatedWhether to change tabs with animation.boolean | { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }
    centeredCenters tabsbooleanfalse4.4.0
    defaultActiveKeyInitial active TabPane's key, if activeKey is not setstring-
    hideAddHide plus icon or not. Only works while type="editable-card"booleanfalse
    indicatorSizeCustomize length of indicator, which is the same as tab by defaultnumber | (origin: number) => number-5.9.0
    itemsConfigure tab contentTabItemType[]4.23.0
    moreIconThe custom icon of ellipsisReactNode<EllipsisOutlined />4.14.0
    popupClassNameclassName for more dropdown.string-4.21.0
    renderTabBarReplace the TabBar(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement-
    sizePreset tab bar sizelarge | middle | smallmiddle
    tabBarExtraContentExtra content in tab barReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0
    tabBarGutterThe gap between tabsnumber-
    tabBarStyleTab bar style objectCSSProperties-
    tabPositionPosition of tabstop | right | bottom | lefttop
    destroyInactiveTabPaneWhether destroy inactive TabPane when change tabbooleanfalse
    typeBasic style of tabsline | card | editable-cardline
    onChangeCallback executed when active tab is changedfunction(activeKey) {}-
    onEditCallback executed when tab is added or removed. Only works while type="editable-card"(action === 'add' ? event : targetKey, action): void-
    onTabClickCallback executed when tab is clickedfunction(key: string, event: MouseEvent)-
    onTabScrollTrigger when tab scrollfunction({ direction: left | right | top | bottom })-4.3.0

    More option at rc-tabs tabs

    TabItemType

    PropertyDescriptionTypeDefault
    closeIconCustomize 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 falseboolean | ReactNode-
    disabledSet TabPane disabledbooleanfalse
    forceRenderForced render of content in tabs, not lazy render after clicking on tabsbooleanfalse
    keyTabPane's keystring-
    labelTabPane's head display textReactNode-
    childrenTabPane's head display contentReactNode-

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    cardBgBackground color of card tabstringrgba(0, 0, 0, 0.02)
    cardGutterGutter of card tabnumber2
    cardHeightHeight of card tabnumber40
    cardPaddingPadding of card tabstring
    cardPaddingLGPadding of large card tabstring8px 16px 6px
    cardPaddingSMPadding of small card tabstring6px 16px
    horizontalItemGutterHorizontal gutter of horizontal tabnumber32
    horizontalItemMarginHorizontal margin of horizontal tab itemstring
    horizontalItemMarginRTLHorizontal margin of horizontal tab item (RTL)string
    horizontalItemPaddingHorizontal padding of horizontal tab itemstring12px 0
    horizontalItemPaddingLGHorizontal padding of large horizontal tab itemstring16px 0
    horizontalItemPaddingSMHorizontal padding of small horizontal tab itemstring8px 0
    horizontalMarginHorizontal margin of horizontal tabstring0 0 16px 0
    inkBarColorColor of indicatorstring#1677ff
    itemActiveColorText color of active tabstring#0958d9
    itemColorText color of tabstringrgba(0, 0, 0, 0.88)
    itemHoverColorText color of hover tabstring#4096ff
    itemSelectedColorText color of selected tabstring#1677ff
    titleFontSizeFont size of titlenumber14
    titleFontSizeLGFont size of large titlenumber16
    titleFontSizeSMFont size of small titlenumber14
    verticalItemMarginVertical margin of vertical tab itemstring16px 0 0 0
    verticalItemPaddingVertical padding of vertical tab itemstring8px 24px
    zIndexPopupz-index of dropdown menunumber1050

    Global TokenHow to use?

    Basic

    Default activate first tab.

    expand codeexpand code
    Disabled

    Disabled a tab.

    expand codeexpand code
    Centered

    Centered tabs.

    expand codeexpand code
    Icon

    The Tab with Icon.

    expand codeexpand code
    Indicator

    Custom indicator size

    expand codeexpand code
    Slide

    In order to fit in more tabs, they can slide left and right (or up and down).

    expand codeexpand code
    Extra content

    You can add extra actions to the right or left or even both side of Tabs.

    expand codeexpand code
    Size

    Large size tabs are usually used in page header, and small size could be used in Modal.

    expand codeexpand code
    Position

    Tab's position: left, right, top or bottom. Will auto switch to top in mobile.

    expand codeexpand code
    Card type tab

    Another type of Tabs, which doesn't support vertical mode.

    expand codeexpand code
    Add & close tab

    Only card type Tabs support adding & closable. +Use closable={false} to disable close.

    expand codeexpand code
    Customized trigger of new tab

    Hide default plus icon, and bind event for customized trigger.

    expand codeexpand code
    Customized bar of tab

    Use react-sticky-box and renderTabBar.

    expand codeexpand code
    Draggable Tabs

    Use dnd-kit to make tabs draggable.

    expand codeexpand code
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 2
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab-0
    Tab-1
    Tab-2
    Tab-3
    Tab-4
    Tab-5
    Tab-6
    Tab-7
    Tab-8
    Tab-9
    Tab-10
    Tab-11
    Tab-12
    Tab-13
    Tab-14
    Tab-15
    Tab-16
    Tab-17
    Tab-18
    Tab-19
    Tab-20
    Tab-21
    Tab-22
    Tab-23
    Tab-24
    Tab-25
    Tab-26
    Tab-27
    Tab-28
    Tab-29
    Content of tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of tab 1



    You can also specify its direction or both side


    Tab 1
    Tab 2
    Tab 3
    Content of tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of tab 1
    Card Tab 1
    Card Tab 2
    Card Tab 3
    Content of card tab 1
    Tab position:
    Tab 1
    Tab 2
    Tab 3
    Content of Tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab 1
    Tab 1
    Tab 2
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1