logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Ant Design of React
  • Getting Started
  • Usage with Umi
  • Usage with create-react-app
  • Usage with Next.js
  • Usage with Vite
  • CSS Compatible
  • Customize Theme
  • Use custom date library
  • V4 to V5
  • Migrate Less variables to Component Token
  • Third-Party Libraries
  • Internationalization
  • FAQ
  • Contributing
  • Change Log
How to use Component Token
Component Token
Anchor
Avatar
BreadCrumb 面包屑
Calendar
Card
Carousel
Checkbox
Descriptions
Drawer
Dropdown
Empty
Image
List
Mentions
Message
Modal
Pagination
Popover>
Radio
Rate
Result
Segment
Skeleton
Statistic
Step
Tabs 标签页
Tag
Timeline
Tooltip
Transfer
Typography
Upload

Migrate Less variables to Component Token

V4 to V5Third-Party Libraries

This document contains the correspondence between all the less variables related to components in version 4.x and the Component Token in version 5.x. If you are upgrading from version 4.x to version 5.x, you can quickly find the corresponding Component Token through this comparison table.

Note: There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x.

How to use Component Token

We could configure global token and component token for each component through the theme property of ConfigProvider.

import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';


const App: React.FC = () => (
  <ConfigProvider
    theme={{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
        Checkbox: {
          colorPrimary: '#ff4d4f',
        },
      },
    }}
  >
    <Radio>Radio</Radio>
    <Checkbox>Checkbox</Checkbox>
  </ConfigProvider>
);


export default App;

Component Token

Anchor

Less variablesComponent TokenNote
@anchor-bg'-'Can be modified directly by className or style
@anchor-border-colorcolorSplitGlobalToken
@anchor-link-toplinkPaddingBlock-
@anchor-link-leftlinkPaddingInlineStart-
@anchor-link-padding-${linkPaddingBlock}px ${linkPaddingInlineStart}px

Avatar

less 变量Component Token备注
@avatar-size-basecontainerSize-
@avatar-size-lgcontainerSizeLG-
@avatar-size-smcontainerSizeSM-
@avatar-font-size-basetextFontSize-
@avatar-font-size-lgtextFontSizeLG-
@avatar-font-size-smtextFontSizeSM-
@avatar-bg-Can be directly overridden by className or style
@avatar-colorcolorTextLightSolidGlobal Token
@avatar-border-radiusborderRadiusGlobal Token
@avatar-group-overlapping-Deprecated for style change
@avatar-group-spacegroupSpace-
@avatar-group-border-colorcolorBorderBgGlobal Token

BreadCrumb 面包屑

Less 变量Component Token备注
@breadcrumb-base-coloritemColor-
@breadcrumb-last-item-colorlastItemColor-
@breadcrumb-font-sizefontSizeGlobalToken
@breadcrumb-icon-font-sizeiconFontSize-
@breadcrumb-link-colorlinkColor-
@breadcrumb-link-color-hoverlinkHoverColor-
@breadcrumb-separator-colorseparatorColor-
@breadcrumb-separator-marginseparatorMargin-

Calendar

Less variablesComponent TokenNote
@calendar-bg-Deprecated for style change
@calendar-input-bg-Deprecated for style change
@calendar-border-color-Deprecated for style change
@calendar-item-active-bgitemActiveBg-
@calendar-column-active-bg-Deprecated for style change
@calendar-full-bgfullBg-
@calendar-full-panel-bgfullPanelBg-

Card

Less variablesComponent TokenNote
@card-head-colorcolorTextHeadingGlobal Token
@card-head-backgroundheaderBg-
@card-head-font-sizeheaderFontSize-
@card-head-font-size-smheaderFontSizeSM-
@card-head-padding-Deprecated
@card-head-padding-sm-Deprecated
@card-head-heightheaderHeight-
@card-head-height-smheaderHeightSM-
@card-inner-head-padding-Deprecated
@card-padding-basecardPaddingBase-
@card-padding-base-smcardPaddingBaseSm-
@card-actions-backgroundactionsBackground-
@card-actions-li-marginactionsLiMargin-
@card-skeleton-bg-Deprecated in favor of internal Skeleton
@card-backgroundcolorBgContainerGlobal Token
@card-shadow-Could be modified by className or style directly
@card-radiusborderRadiusLGGlobal Token
@card-head-tabs-margin-bottomtabsMarginBottom-
@card-head-extra-colorextraColor-

Carousel

Less variablesComponent TokenNote
@carousel-dot-widthdotWidth-
@carousel-dot-heightdotHeight-
@carousel-dot-active-widthdotActiveWidth-

Checkbox

Less variablesComponent TokenNote
@checkbox-sizecontrolInteractiveSizeGlobalToken
@checkbox-colorcolorPrimary-
@checkbox-check-colorcolorWhite-
@checkbox-check-bg-colorPrimary
@checkbox-border-widthlineWidth-
@checkbox-border-radiusborderRadiusSM-
@checkbox-group-item-margin-right-Deprecated for style change

Descriptions

Less variablesComponent TokenNote
@descriptions-bglabelBg-
@descriptions-title-margin-bottomtitleMarginBottom-
@descriptions-default-paddingpadding、paddingLGGlobalToken, used as ${token.padding}px ${token.paddingLG}px
@descriptions-middle-paddingpaddingSM、paddingLGGlobalToken, used as ${token.paddingSM}px ${token.paddingLG}px
@descriptions-small-paddingpaddingXS、paddingGlobalToken, used as ${token.paddingXS}px ${token.padding}px
@descriptions-item-padding-bottomitemPaddingBottom-
@descriptions-item-trailing-colon-Deprecated for style change
@descriptions-item-label-colon-margin-rightcolonMarginRight-
@descriptions-item-label-colon-margin-leftcolonMarginLeft-
@descriptions-extra-colorextraColor-

Drawer

Less variablesComponent TokenNote
@drawer-bgcolorBgElevatedGlobalToken
@drawer-header-paddingpadding、paddingLGGlobalToken, used as ${padding}px ${paddingLG}px
@drawer-title-font-sizefontSizeLGGlobalToken
@drawer-title-line-heightlineHeightLGGlobalToken
@drawer-body-paddingpaddingLGGlobalToken
@drawer-footer-padding-verticalfooterPaddingBlockfooterPaddingBlock is a number without units, @drawer-footer-padding-vertical with units
@drawer-footer-padding-horizontalfooterPaddingInlinefooterPaddingInline is a number without units, @drawer-footer-padding-horizontal with units

Dropdown

Less variablesComponent TokenNote
@dropdown-selected-colorcolorPrimary-
@dropdown-menu-submenu-disabled-bgcolorBgElevatedGlobalToken
@dropdown-selected-bgcontrolItemBgActiveGlobalToken

Empty

Less variablesComponent TokenNote
@empty-font-sizefontSizeGlobalToken

Image

Less variablesComponent TokenNote
@image-size-base-Deprecated for not used
@image-font-size-base-Deprecated for not used
@image-bgcolorFillTertiaryGlobalToken
@image-colorcolorTextLightSolidGlobalToken
@image-preview-operation-sizepreviewOperationSize-
@image-preview-operation-colorpreviewOperationColor-
@image-preview-operation-disabled-colorpreviewOperationColorDisabled-

List

Less variablesComponent TokenNote
@list-header-backgroundheaderBg-
@list-footer-backgroundfooterBg-
@list-empty-text-paddingemptyTextPadding-
@list-item-paddingitemPadding-
@list-item-padding-smitemPaddingSM-
@list-item-padding-lgitemPaddingLG-
@list-item-meta-margin-bottommetaMarginBottom-
@list-item-meta-avatar-margin-rightavatarMarginRight-
@list-item-meta-title-margin-bottomtitleMarginBottom-
@list-customize-card-bg-Deprecated for style change
@list-item-meta-description-font-sizedescriptionFontSize-

Mentions

less 变量Component TokenNote
@mentions-dropdown-bgcolorBgElevatedGlobalToken
@mentions-dropdown-menu-item-hover-bg-Deprecated

Message

Less variablesComponent TokenNote
@zindex-messagezIndexPopup-
@message-notice-content-paddingcontentPadding-
@message-notice-content-bgcontentBg-

Modal

Less variablesComponent TokenNote
@modal-header-padding-vertical-Deprecated for style change
@modal-header-padding-horizontal-Deprecated for style change
@modal-body-padding-Deprecated for style change
@modal-header-bgheaderBg-
@modal-header-padding-Deprecated for style change
@modal-header-border-width-Deprecated for style change
@modal-header-border-style-Deprecated for style change
@modal-header-title-line-heighttitleLineHeight-
@modal-header-title-font-sizetitleFontSize-
@modal-header-border-color-split-Deprecated for style change
@modal-header-close-size-Deprecated for style change
@modal-content-bgcontentBg-
@modal-heading-colortitleColor-
@modal-close-colorcolorIconGlobalToken
@modal-footer-bgfooterBg-
@modal-footer-border-color-split-Deprecated for style change
@modal-footer-border-style-Deprecated for style change
@modal-footer-padding-vertical-Deprecated for style change
@modal-footer-padding-horizontal-Deprecated for style change
@modal-footer-border-width-Deprecated for style change
@modal-mask-bgcolorBgMaskGlobalToken
@modal-confirm-body-padding-Deprecated for style change
@modal-confirm-title-font-sizetitleFontSize-
@modal-border-radiusborderRadiusLGGlobalToken

Pagination

Less variablesComponent TokenNote
@pagination-item-bgitemBg-
@pagination-item-sizeitemSize-
@pagination-item-size-smitemSizeSM-
@pagination-font-familyfontFamilyGlobalToken
@pagination-font-weight-activefontWeightStrongGlobalToken
@pagination-item-bg-activeitemActiveBg-
@pagination-item-link-bgitemLinkBg-
@pagination-item-disabled-color-activeitemDisabledColorActive-
@pagination-item-disabled-bg-activeitemDisabledBgActive-
@pagination-item-input-bgitemInputBg-
@pagination-mini-options-size-changer-topminiOptionsSizeChangerTop-

Popover>

Less variablesComponent TokenNote
@popover-bgcolorBgContainer-
@popover-colorcolorTextGlobalToken
@popover-min-widthminWidth-
@popover-min-height-Deprecated for style change
@popover-arrow-widthsizePopupArrowGlobalToken
@popover-arrow-color-Deprecated for style change
@popover-arrow-outer-color-Deprecated for style change
@popover-distancemarginXXSGlobal Token
@popover-padding-horizontal-Deprecated for style change

Radio

Less variablesComponent TokenNote
@radio-sizeradioSize-
@radio-top-Deprecated
@radio-border-widthlineWidthGlobal Token
@radio-dot-sizedotSize-
@radio-dot-color-Deprecated
@radio-dot-disabled-colordotColorDisabled-
@radio-solid-checked-colorbuttonSolidCheckedColor-
@radio-button-bgbuttonBg-
@radio-button-checked-bgbuttonCheckedBg-
@radio-button-colorbuttonColor-
@radio-button-hover-colorcolorPrimaryHoverGlobal Token
@radio-button-active-colorcolorPrimaryActiveGlobal Token
@radio-button-padding-horizontalbuttonPaddingInline-
@radio-disabled-button-checked-bgbuttonCheckdBgDisabled-
@radio-disabled-button-checked-colorbuttonCheckdColorDisabled-
@radio-wrapper-margin-rightwrapperMarginInlineEnd-

Rate

Less variablesComponent TokenNote
@rate-star-colorstarColor-
@rate-star-bgstarBg-
@rate-star-sizestarSize-
@rate-star-hover-scalestarHoverScale-

Result

Less variablesComponent TokenNote
@result-icon-font-sizeiconFontSize-
@result-title-font-sizetitleFontSize-
@result-subtitle-font-sizesubtitleFontSize-
@result-extra-marginextraMargin-

Segment

Less variablesComponent TokenNote
@segmented-container-paddingpadding-
@segmented-label-coloritemColor-
@segmented-hover-bgitemHoverBg-
@segmented-bg-Could be customized with className or style
@segmented-label-hover-coloritemHoverColor-
@segmented-selected-bgitemSelectedBg-

Skeleton

Less variablesComponent TokenNote
@skeleton-block-radiusblockRadius-
@skeleton-title-heighttitleHeight-
@skeleton-colorgradientFromColor-
@skeleton-to-colorgradientToColor-
@skeleton-paragraph-margin-topparagraphMarginTop-
@skeleton-paragraph-li-heightparagraphLiHeight-
@skeleton-paragraph-li-margin-top-由于样式变化已废弃

Statistic

Less variablesComponent TokenNote
@statistic-title-font-sizetitleFontSize-
@statistic-content-font-sizecontentFontSize-
@statistic-font-familyfontFamilyGlobalToken

Step

Less variablesComponent TokenNote
@process-tail-colorcolorSplitGlobalToken
@steps-nav-arrow-colornavArrowColor-
@steps-backgroundcolorBgContainer-
@steps-icon-sizeiconSize-
@steps-icon-custom-sizecustomIconSize-
@steps-icon-custom-topcustomIconTop-
@steps-icon-custom-font-sizecustomIconFontSize-
@steps-icon-topiconTop-
@steps-icon-font-sizeiconFontSize-
@steps-icon-margin-Deprecated
@steps-title-line-heighttitleLineHeight-
@steps-small-icon-sizeiconSizeSM-
@steps-small-icon-margin-Deprecated
@steps-dot-sizedotSize-
@steps-dot-top-Deprecated
@steps-current-dot-sizedotCurrentSize-
@steps-description-max-widthdescriptionMaxWidth-
@steps-nav-content-max-widthstepsNavContentMaxWidth-
@steps-vertical-icon-widthiconSize-
@steps-vertical-tail-width-Deprecated
@steps-vertical-tail-width-sm-Deprecated

Tabs 标签页

Less variablesComponent TokenNote
@tabs-card-head-backgroundcardBg-
@tabs-card-heightcardHeight-
@tabs-card-active-coloritemSelectedColor-
@tabs-card-horizontal-paddingcardPadding-
@tabs-card-horizontal-padding-smcardPaddingSM-
@tabs-card-horizontal-padding-lgcardPaddingLG-
@tabs-title-font-sizetitleFontSize-
@tabs-title-font-size-lgtitleFontSizeLG-
@tabs-title-font-size-smtitleFontSizeSM-
@tabs-ink-bar-colorinkBarColor-
@tabs-bar-marginhorizontalMargin-
@tabs-horizontal-gutterhorizontalItemGutter-
@tabs-horizontal-marginhorizontalItemMargin-
@tabs-horizontal-margin-rtlhorizontalItemMarginRTL-
@tabs-horizontal-paddinghorizontalItemPadding-
@tabs-horizontal-padding-lghorizontalItemPaddingLG-
@tabs-horizontal-padding-smhorizontalItemPaddingSM-
@tabs-vertical-paddingverticalItemPadding-
@tabs-vertical-marginverticalItemMargin-
@tabs-scrolling-size-Deprecated
@tabs-highlight-coloritemSelectedColor-
@tabs-hover-coloritemHoverColor-
@tabs-active-coloritemActiveColor-
@tabs-card-guttercardGutter-
@tabs-card-tab-active-border-top-Deprecated

Tag

Less variablesComponent TokenNote
@tag-border-radiusborderRadiusSMGlobal Token
@tag-default-bgdefaultBg-
@tag-default-colordefaultColor-
@tag-font-sizefontSizeSMGlobal Token
@tag-line-heightlineHeightSMGlobal Token

Timeline

Less variablesComponent TokenNote
@timeline-widthtailWidthtailWidth is a number without units, @timeline-width with units
@timeline-colortailColor-
@timeline-dot-border-widthdotBorderWidth-
@timeline-dot-color-Deprecated
@timeline-dot-bgdotBg-
@timeline-item-padding-bottomitemPaddingBottom-

Tooltip

Less variablesComponent TokenNote
@tooltip-max-width-Can be directly modified by className or style
@tooltip-colorcolorTextLightSolidGlobal Token
@tooltip-bgcolorBgSpotlightGlobal Token
@tooltip-arrow-widthsizePopupArrowGlobal Token
@tooltip-distancemarginXXSGlobal Token
@tooltip-arrow-color-same as @tooltip-bg，Deprecated
@tooltip-border-radiusborderRadiusGlobal Token

Transfer

Less variablesComponent TokenNote
@transfer-header-heightheaderHeight-
@transfer-item-heightitemHeight-
@transfer-disabled-bgcolorBgContainerDisabledGlobal Token
@transfer-list-heightlistHeight-
@transfer-item-hover-bgcontrolItemBgHoverGlobal Token
@transfer-item-selected-hover-bgcontrolItemBgActiveHoverGlobal Token
@transfer-item-padding-verticalitemPaddingBlock-
@transfer-list-search-icon-top-Deprecated

Typography

Less variablesComponent TokenNote
@typography-title-font-weightfontWeightStrongGlobal Token
@typography-title-margin-toptitleMarginTop-
@typography-title-margin-bottomtitleMarginBottom-

Upload

Less variablesComponent TokenNote
@upload-actions-coloractionsColor-