Less variables to Component Token

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 React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';

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 variables	Component Token	Note
`@anchor-bg`	'-'	Can be modified directly by `className` or `style`
`@anchor-border-color`	`colorSplit`	GlobalToken
`@anchor-link-top`	`linkPaddingBlock`	-
`@anchor-link-left`	`linkPaddingInlineStart`	-
`@anchor-link-padding`	-	`${linkPaddingBlock}px ${linkPaddingInlineStart}px`

Avatar

less 变量	Component Token	备注
`@avatar-size-base`	`containerSize`	-
`@avatar-size-lg`	`containerSizeLG`	-
`@avatar-size-sm`	`containerSizeSM`	-
`@avatar-font-size-base`	`textFontSize`	-
`@avatar-font-size-lg`	`textFontSizeLG`	-
`@avatar-font-size-sm`	`textFontSizeSM`	-
`@avatar-bg`	-	Can be directly overridden by `className` or `style`
`@avatar-color`	`colorTextLightSolid`	Global Token
`@avatar-border-radius`	`borderRadius`	Global Token
`@avatar-group-overlapping`	-	Deprecated for style change
`@avatar-group-space`	`groupSpace`	-
`@avatar-group-border-color`	`colorBorderBg`	Global Token

Less 变量	Component Token	备注
`@breadcrumb-base-color`	`itemColor`	-
`@breadcrumb-last-item-color`	`lastItemColor`	-
`@breadcrumb-font-size`	`fontSize`	GlobalToken
`@breadcrumb-icon-font-size`	`iconFontSize`	-
`@breadcrumb-link-color`	`linkColor`	-
`@breadcrumb-link-color-hover`	`linkHoverColor`	-
`@breadcrumb-separator-color`	`separatorColor`	-
`@breadcrumb-separator-margin`	`separatorMargin`	-

Calendar

Less variables	Component Token	Note
`@calendar-bg`	-	Deprecated for style change
`@calendar-input-bg`	-	Deprecated for style change
`@calendar-border-color`	-	Deprecated for style change
`@calendar-item-active-bg`	`itemActiveBg`	-
`@calendar-column-active-bg`	-	Deprecated for style change
`@calendar-full-bg`	`fullBg`	-
`@calendar-full-panel-bg`	`fullPanelBg`	-

Card

Less variables	Component Token	Note
`@card-head-color`	`colorTextHeading`	Global Token
`@card-head-background`	`headerBg`	-
`@card-head-font-size`	`headerFontSize`	-
`@card-head-font-size-sm`	`headerFontSizeSM`	-
`@card-head-padding`	-	Deprecated
`@card-head-padding-sm`	-	Deprecated
`@card-head-height`	`headerHeight`	-
`@card-head-height-sm`	`headerHeightSM`	-
`@card-inner-head-padding`	-	Deprecated
`@card-padding-base`	`cardPaddingBase`	-
`@card-padding-base-sm`	`cardPaddingBaseSm`	-
`@card-actions-background`	`actionsBackground`	-
`@card-actions-li-margin`	`actionsLiMargin`	-
`@card-skeleton-bg`	-	Deprecated in favor of internal Skeleton
`@card-background`	`colorBgContainer`	Global Token
`@card-shadow`	-	Could be modified by `className` or `style` directly
`@card-radius`	`borderRadiusLG`	Global Token
`@card-head-tabs-margin-bottom`	`tabsMarginBottom`	-
`@card-head-extra-color`	`extraColor`	-

Carousel

Less variables	Component Token	Note
`@carousel-dot-width`	`dotWidth`	-
`@carousel-dot-height`	`dotHeight`	-
`@carousel-dot-active-width`	`dotActiveWidth`	-

Checkbox

Less variables	Component Token	Note
`@checkbox-size`	`controlInteractiveSize`	GlobalToken
`@checkbox-color`	`colorPrimary`	-
`@checkbox-check-color`	`colorWhite`	-
`@checkbox-check-bg`	-	`colorPrimary`
`@checkbox-border-width`	`lineWidth`	-
`@checkbox-border-radius`	`borderRadiusSM`	-
`@checkbox-group-item-margin-right`	-	Deprecated for style change

Descriptions

Less variables	Component Token	Note
`@descriptions-bg`	`labelBg`	-
`@descriptions-title-margin-bottom`	`titleMarginBottom`	-
`@descriptions-default-padding`	`padding`、`paddingLG`	GlobalToken, used as `${token.padding}px ${token.paddingLG}px`
`@descriptions-middle-padding`	`paddingSM`、`paddingLG`	GlobalToken, used as `${token.paddingSM}px ${token.paddingLG}px`
`@descriptions-small-padding`	`paddingXS`、`padding`	GlobalToken, used as `${token.paddingXS}px ${token.padding}px`
`@descriptions-item-padding-bottom`	`itemPaddingBottom`	-
`@descriptions-item-trailing-colon`	-	Deprecated for style change
`@descriptions-item-label-colon-margin-right`	`colonMarginRight`	-
`@descriptions-item-label-colon-margin-left`	`colonMarginLeft`	-
`@descriptions-extra-color`	`extraColor`	-

Drawer

Less variables	Component Token	Note
`@drawer-bg`	`colorBgElevated`	GlobalToken
`@drawer-header-padding`	`padding`、`paddingLG`	GlobalToken, used as `${padding}px ${paddingLG}px`
`@drawer-title-font-size`	`fontSizeLG`	GlobalToken
`@drawer-title-line-height`	`lineHeightLG`	GlobalToken
`@drawer-body-padding`	`paddingLG`	GlobalToken
`@drawer-footer-padding-vertical`	`footerPaddingBlock`	`footerPaddingBlock` is a number without units, `@drawer-footer-padding-vertical` with units
`@drawer-footer-padding-horizontal`	`footerPaddingInline`	`footerPaddingInline` is a number without units, `@drawer-footer-padding-horizontal` with units

Less variables	Component Token	Note
`@dropdown-selected-color`	`colorPrimary`	-
`@dropdown-menu-submenu-disabled-bg`	`colorBgElevated`	GlobalToken
`@dropdown-selected-bg`	`controlItemBgActive`	GlobalToken

Empty

Less variables	Component Token	Note
`@empty-font-size`	`fontSize`	GlobalToken

Image

Less variables	Component Token	Note
`@image-size-base`	-	Deprecated for not used
`@image-font-size-base`	-	Deprecated for not used
`@image-bg`	`colorFillTertiary`	GlobalToken
`@image-color`	`colorTextLightSolid`	GlobalToken
`@image-preview-operation-size`	`previewOperationSize`	-
`@image-preview-operation-color`	`previewOperationColor`	-
`@image-preview-operation-disabled-color`	`previewOperationColorDisabled`	-

List

Less variables	Component Token	Note
`@list-header-background`	`headerBg`	-
`@list-footer-background`	`footerBg`	-
`@list-empty-text-padding`	`emptyTextPadding`	-
`@list-item-padding`	`itemPadding`	-
`@list-item-padding-sm`	`itemPaddingSM`	-
`@list-item-padding-lg`	`itemPaddingLG`	-
`@list-item-meta-margin-bottom`	`metaMarginBottom`	-
`@list-item-meta-avatar-margin-right`	`avatarMarginRight`	-
`@list-item-meta-title-margin-bottom`	`titleMarginBottom`	-
`@list-customize-card-bg`	-	Deprecated for style change
`@list-item-meta-description-font-size`	`descriptionFontSize`	-

Mentions

Less variables	Component Token	Note
`@mentions-dropdown-bg`	`colorBgElevated`	GlobalToken
`@mentions-dropdown-menu-item-hover-bg`	-	Deprecated

Less variables	Component Token	Note
`@menu-inline-toplevel-item-height`	`itemHeight`	Same as `@menu-item-height`
`@menu-item-height`	`itemHeight`	-
`@menu-item-group-height`	`groupTitleLineHeight`	-
`@menu-collapsed-width`	`collapsedWidth`	-
`@menu-bg`	`itemBg`	-
`@menu-popup-bg`	`popupBg`	-
`@menu-item-color`	`itemColor`	-
`@menu-inline-submenu-bg`	`subMenuItemBg`	-
`@menu-highlight-color`	`itemSelectedColor`	-
`@menu-highlight-danger-color`	`dangerItemSelectedColor`	-
`@menu-item-active-bg`	`itemActiveBg`	-
`@menu-item-active-danger-bg`	`dangerItemActiveBg`	-
`@menu-item-active-border-width`	`activeBarBorderWidth`	-
`@menu-item-group-title-color`	`groupTitleColor`	-
`@menu-item-vertical-margin`	`itemMarginBlock`	-
`@menu-item-font-size`	`fontSize`	Global Token
`@menu-item-boundary-margin`	-	Deprecated in favor of new style, use `itemMarginBlock` instead
`@menu-item-padding-horizontal`	`itemPaddingInline`	-
`@menu-item-padding`	-	Depreacated, use `itemPaddingInline` and `itemHeight` instead
`@menu-horizontal-line-height`	`horizontalLineHeight`	-
`@menu-icon-margin-right`	`iconMarginInlineEnd`	-
`@menu-icon-size`	`iconSize`	-
`@menu-icon-size-lg`	`horizontalLineHeight`	-
`@menu-dark-color`	`darkItemColor`	-
`@menu-dark-danger-color`	`darkDangerItemColor`	-
`@menu-dark-bg`	`darkItemBg`	-
`@menu-dark-arrow-color`	-	Deprecated, and same as text color
`@menu-dark-inline-submenu-bg`	`darkSubMenuItemBg`	-
`@menu-dark-highlight-color`	`darkItemSelectedColor`	-
`@menu-dark-item-active-bg`	`darkItemSelectedBg`	-
`@menu-dark-item-active-danger-bg`	`darkDangerItemSelectedBg`	-
`@menu-dark-selected-item-icon-color`	-	Deprecated, same as `darkItemSelectedColor`
`@menu-dark-selected-item-text-color`	-	Deprecated, same as `darkItemSelectedColor`
`@menu-dark-item-hover-bg`	`darkItemHoverBg`	-

Message

Less variables	Component Token	Note
`@zindex-message`	`zIndexPopup`	-
`@message-notice-content-padding`	`contentPadding`	-
`@message-notice-content-bg`	`contentBg`	-

Less variables	Component Token	Note
`@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-bg`	`headerBg`	-
`@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-height`	`titleLineHeight`	-
`@modal-header-title-font-size`	`titleFontSize`	-
`@modal-header-border-color-split`	-	Deprecated for style change
`@modal-header-close-size`	-	Deprecated for style change
`@modal-content-bg`	`contentBg`	-
`@modal-heading-color`	`titleColor`	-
`@modal-close-color`	`colorIcon`	GlobalToken
`@modal-footer-bg`	`footerBg`	-
`@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-bg`	`colorBgMask`	GlobalToken
`@modal-confirm-body-padding`	-	Deprecated for style change
`@modal-confirm-title-font-size`	`titleFontSize`	-
`@modal-border-radius`	`borderRadiusLG`	GlobalToken

Pagination

Less variables	Component Token	Note
`@pagination-item-bg`	`itemBg`	-
`@pagination-item-size`	`itemSize`	-
`@pagination-item-size-sm`	`itemSizeSM`	-
`@pagination-font-family`	`fontFamily`	GlobalToken
`@pagination-font-weight-active`	`fontWeightStrong`	GlobalToken
`@pagination-item-bg-active`	`itemActiveBg`	-
`@pagination-item-link-bg`	`itemLinkBg`	-
`@pagination-item-disabled-color-active`	`itemDisabledColorActive`	-
`@pagination-item-disabled-bg-active`	`itemDisabledBgActive`	-
`@pagination-item-input-bg`	`itemInputBg`	-
`@pagination-mini-options-size-changer-top`	`miniOptionsSizeChangerTop`	-

Less variables	Component Token	Note
`@popover-bg`	`colorBgContainer`	-
`@popover-color`	`colorText`	GlobalToken
`@popover-min-width`	`minWidth`	-
`@popover-min-height`	-	Deprecated for style change
`@popover-arrow-width`	`sizePopupArrow`	GlobalToken
`@popover-arrow-color`	-	Deprecated for style change
`@popover-arrow-outer-color`	-	Deprecated for style change
`@popover-distance`	`marginXXS`	Global Token
`@popover-padding-horizontal`	-	Deprecated for style change

Radio

Less variables	Component Token	Note
`@radio-size`	`radioSize`	-
`@radio-top`	-	Deprecated
`@radio-border-width`	`lineWidth`	Global Token
`@radio-dot-size`	`dotSize`	-
`@radio-dot-color`	-	Deprecated
`@radio-dot-disabled-color`	`dotColorDisabled`	-
`@radio-solid-checked-color`	`buttonSolidCheckedColor`	-
`@radio-button-bg`	`buttonBg`	-
`@radio-button-checked-bg`	`buttonCheckedBg`	-
`@radio-button-color`	`buttonColor`	-
`@radio-button-hover-color`	`colorPrimaryHover`	Global Token
`@radio-button-active-color`	`colorPrimaryActive`	Global Token
`@radio-button-padding-horizontal`	`buttonPaddingInline`	-
`@radio-disabled-button-checked-bg`	`buttonCheckdBgDisabled`	-
`@radio-disabled-button-checked-color`	`buttonCheckdColorDisabled`	-
`@radio-wrapper-margin-right`	`wrapperMarginInlineEnd`	-

Rate

Less variables	Component Token	Note
`@rate-star-color`	`starColor`	-
`@rate-star-bg`	`starBg`	-
`@rate-star-size`	`starSize`	-
`@rate-star-hover-scale`	`starHoverScale`	-

Result

Less variables	Component Token	Note
`@result-icon-font-size`	`iconFontSize`	-
`@result-title-font-size`	`titleFontSize`	-
`@result-subtitle-font-size`	`subtitleFontSize`	-
`@result-extra-margin`	`extraMargin`	-

Segment

Less variables	Component Token	Note
`@segmented-container-padding`	`padding`	-
`@segmented-label-color`	`itemColor`	-
`@segmented-hover-bg`	`itemHoverBg`	-
`@segmented-bg`	-	Could be customized with `className` or `style`
`@segmented-label-hover-color`	`itemHoverColor`	-
`@segmented-selected-bg`	`itemSelectedBg`	-

Skeleton

Less variables	Component Token	Note
`@skeleton-block-radius`	`blockRadius`	-
`@skeleton-title-height`	`titleHeight`	-
`@skeleton-color`	`gradientFromColor`	-
`@skeleton-to-color`	`gradientToColor`	-
`@skeleton-paragraph-margin-top`	`paragraphMarginTop`	-
`@skeleton-paragraph-li-height`	`paragraphLiHeight`	-
`@skeleton-paragraph-li-margin-top`	-	Deprecated for style change

Slider

Less 变量	Component Token	备注
`@slider-margin`	-	Could be customized with `className` or `style`
`@slider-rail-background-color`	`railBg`	-
`@slider-rail-background-color-hover`	`railHoverBg`	-
`@slider-track-background-color`	`trackBg`	-
`@slider-track-background-color-hover`	`trackHoverBg`	-
`@slider-handle-border-width`	`handleLineWidth`	-
`@slider-handle-background-color`	-	Deprecated
`@slider-handle-color`	`handleColor`	-
`@slider-handle-color-hover`	`handleActiveColor`	-
`@slider-handle-color-focus`	`handleActiveColor`	-
`@slider-handle-color-focus-shadow`	- Deprecated
`@slider-handle-color-tooltip-open`	`handleActiveColor`	-
`@slider-handle-size`	`handleSize`	-
`@slider-handle-margin-top`	-	Deprecated
`@slider-handle-margin-left`	-	Deprecated
`@slider-handle-shadow`	-	Deprecated
`@slider-dot-border-color`	`dotBorderColor`	-
`@slider-dot-border-color-active`	`dotActiveBorderColor`	-
`@slider-disabled-color`	`trackBgDisabled`	-
`@slider-disabled-background-color`	-	Deprecated

Statistic

Less variables	Component Token	Note
`@statistic-title-font-size`	`titleFontSize`	-
`@statistic-content-font-size`	`contentFontSize`	-
`@statistic-font-family`	`fontFamily`	GlobalToken

Step

Less variables	Component Token	Note
`@process-tail-color`	`colorSplit`	GlobalToken
`@steps-nav-arrow-color`	`navArrowColor`	-
`@steps-background`	`colorBgContainer`	-
`@steps-icon-size`	`iconSize`	-
`@steps-icon-custom-size`	`customIconSize`	-
`@steps-icon-custom-top`	`customIconTop`	-
`@steps-icon-custom-font-size`	`customIconFontSize`	-
`@steps-icon-top`	`iconTop`	-
`@steps-icon-font-size`	`iconFontSize`	-
`@steps-icon-margin`	-	Deprecated
`@steps-title-line-height`	`titleLineHeight`	-
`@steps-small-icon-size`	`iconSizeSM`	-
`@steps-small-icon-margin`	-	Deprecated
`@steps-dot-size`	`dotSize`	-
`@steps-dot-top`	-	Deprecated
`@steps-current-dot-size`	`dotCurrentSize`	-
`@steps-description-max-width`	`descriptionMaxWidth`	-
`@steps-nav-content-max-width`	`stepsNavContentMaxWidth`	-
`@steps-vertical-icon-width`	`iconSize`	-
`@steps-vertical-tail-width`	-	Deprecated
`@steps-vertical-tail-width-sm`	-	Deprecated

Tabs

Less variables	Component Token	Note
`@tabs-card-head-background`	`cardBg`	-
`@tabs-card-height`	`cardHeight`	-
`@tabs-card-active-color`	`itemSelectedColor`	-
`@tabs-card-horizontal-padding`	`cardPadding`	-
`@tabs-card-horizontal-padding-sm`	`cardPaddingSM`	-
`@tabs-card-horizontal-padding-lg`	`cardPaddingLG`	-
`@tabs-title-font-size`	`titleFontSize`	-
`@tabs-title-font-size-lg`	`titleFontSizeLG`	-
`@tabs-title-font-size-sm`	`titleFontSizeSM`	-
`@tabs-ink-bar-color`	`inkBarColor`	-
`@tabs-bar-margin`	`horizontalMargin`	-
`@tabs-horizontal-gutter`	`horizontalItemGutter`	-
`@tabs-horizontal-margin`	`horizontalItemMargin`	-
`@tabs-horizontal-margin-rtl`	`horizontalItemMarginRTL`	-
`@tabs-horizontal-padding`	`horizontalItemPadding`	-
`@tabs-horizontal-padding-lg`	`horizontalItemPaddingLG`	-
`@tabs-horizontal-padding-sm`	`horizontalItemPaddingSM`	-
`@tabs-vertical-padding`	`verticalItemPadding`	-
`@tabs-vertical-margin`	`verticalItemMargin`	-
`@tabs-scrolling-size`	-	Deprecated
`@tabs-highlight-color`	`itemSelectedColor`	-
`@tabs-hover-color`	`itemHoverColor`	-
`@tabs-active-color`	`itemActiveColor`	-
`@tabs-card-gutter`	`cardGutter`	-
`@tabs-card-tab-active-border-top`	-	Deprecated

Tag

Less variables	Component Token	Note
`@tag-border-radius`	`borderRadiusSM`	Global Token
`@tag-default-bg`	`defaultBg`	-
`@tag-default-color`	`defaultColor`	-
`@tag-font-size`	`fontSizeSM`	Global Token
`@tag-line-height`	`lineHeightSM`	Global Token

Timeline

Less variables	Component Token	Note
`@timeline-width`	`tailWidth`	`tailWidth` is a number without units, `@timeline-width` with units
`@timeline-color`	`tailColor`	-
`@timeline-dot-border-width`	`dotBorderWidth`	-
`@timeline-dot-color`	-	Deprecated
`@timeline-dot-bg`	`dotBg`	-
`@timeline-item-padding-bottom`	`itemPaddingBottom`	-

Less variables	Component Token	Note
`@tooltip-max-width`	-	Can be directly modified by `className` or `style`
`@tooltip-color`	`colorTextLightSolid`	Global Token
`@tooltip-bg`	`colorBgSpotlight`	Global Token
`@tooltip-arrow-width`	`sizePopupArrow`	Global Token
`@tooltip-distance`	`marginXXS`	Global Token
`@tooltip-arrow-color`	-	same as `@tooltip-bg`，Deprecated
`@tooltip-border-radius`	`borderRadius`	Global Token

Transfer

Less variables	Component Token	Note
`@transfer-header-height`	`headerHeight`	-
`@transfer-item-height`	`itemHeight`	-
`@transfer-disabled-bg`	`colorBgContainerDisabled`	Global Token
`@transfer-list-height`	`listHeight`	-
`@transfer-item-hover-bg`	`controlItemBgHover`	Global Token
`@transfer-item-selected-hover-bg`	`controlItemBgActiveHover`	Global Token
`@transfer-item-padding-vertical`	`itemPaddingBlock`	-
`@transfer-list-search-icon-top`	-	Deprecated

Typography

Less variables	Component Token	Note
`@typography-title-font-weight`	`fontWeightStrong`	Global Token
`@typography-title-margin-top`	`titleMarginTop`	-
`@typography-title-margin-bottom`	`titleMarginBottom`	-

Upload

Less variables	Component Token	Note
`@upload-actions-color`	`actionsColor`	-

Less variables to Component Token

Less variables to Component Token

How to use Component Token

Component Token

Anchor

Avatar

BreadCrumb

Calendar

Card

Carousel

Checkbox

Descriptions

Drawer

Dropdown

Empty

Image

List

Mentions

Menu

Message

Modal

Pagination

Popover>

Radio

Rate

Result

Segment

Skeleton

Slider

Statistic

Step

Tabs

Tag

Timeline

Tooltip

Transfer

Typography

Upload

How to use Component Token

Component Token

Anchor

Avatar

BreadCrumb

Calendar

Card

Carousel

Checkbox

Descriptions

Drawer

Dropdown

Empty

Image

List

Mentions

Menu

Message

Modal

Pagination

Popover>

Radio

Rate

Result

Segment

Skeleton

Slider

Statistic

Step

Tabs

Tag

Timeline

Tooltip

Transfer

Typography

Upload