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.

tsx

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

Alert

Less variables	Component Token	Note
`@alert-success-border-color`	`colorSuccessBorder`	Global token
`@alert-success-bg-color`	`colorSuccessBg`	Global token
`@alert-success-icon-color`	`colorSuccess`	Global token
`@alert-info-border-color`	`colorInfoBorder`	Global token
`@alert-info-bg-color`	`colorInfoBg`	Global token
`@alert-info-icon-color`	`colorInfo`	Global token
`@alert-warning-border-color`	`colorWarningBorder`	Global token
`@alert-warning-bg-color`	`colorWarningBg`	Global token
`@alert-warning-icon-color`	`colorWarning`	Global token
`@alert-error-border-color`	`colorErrorBorder`	Global token
`@alert-error-bg-color`	`colorErrorBg`	Global token
`@alert-error-icon-color`	`colorError`	Global token
`@alert-message-color`	`colorTextHeading`	Global token
`@alert-text-color`	`colorText`	Global Token
`@alert-close-color`	`colorIcon`	Global token
`@alert-close-hover-color`	`colorIconHover`	Global token
`@alert-padding-vertical`	`defaultPadding`	Control the whole padding
`@alert-padding-horizontal`	`defaultPadding`	Control the whole padding
`@alert-no-icon-padding-vertical`	-	Deprecated
`@alert-with-description-no-icon-padding-vertical`	`withDescriptionPadding`	Control the whole padding
`@alert-with-description-padding-vertical`	`withDescriptionPadding`	Control the whole padding
`@alert-with-description-padding`	`withDescriptionPadding`	Control the whole padding
`@alert-icon-top`	-	Deprecated
`@alert-with-description-icon-size`	`withDescriptionIconSize`	-

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 variables	Component Token	Note
`@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

Badge

Less variables	Component Token	Note
`@zindex-badge`	`indicatorZIndex`	-
`@badge-height`	`indicatorHeight`	-
`@badge-height-sm`	`indicatorHeightSM`	-
`@badge-dot-size`	`dotSize`	-
`@badge-font-size`	`textFontSize`	-
`@badge-font-size-sm`	`textFontSizeSM`	-
`@badge-font-weight`	`textFontWeight`	-
`@badge-status-size`	`statusSize`	-
`@badge-text-color`	`colorBgContainer`	Global Token
`@badge-color`	`colorError`	Global Token

Less variables	Component Token	Note
`@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`	-

Button

Less variables	Component Token	Note
`@btn-font-weight`	`fontWeight`	-
`@btn-border-radius-base`	`borderRadius`	Global Token
`@btn-border-radius-sm`	`borderRadiusSM`	Global Token
`@btn-border-width`	`lineWidth`	Global Token
`@btn-border-style`	`lineStyle`	Global Token
`@btn-shadow`	`defaultShadow`	-
`@btn-primary-shadow`	`primaryShadow`	-
`@btn-text-shadow`	-	Deprecated for no `text-shadow` any more
`@btn-primary-color`	`primaryColor`	-
`@btn-primary-bg`	`colorPrimary`	Global Token
`@btn-default-color`	`colorText`	Global Token
`@btn-default-bg`	`colorBgContainer`	Global Token
`@btn-default-border`	`colorBorder`	Global Token
`@btn-danger-color`	`dangerColor`	-
`@btn-danger-bg`	`colorError`	Global Token
`@btn-danger-border`	`colorError`	Global Token
`@btn-disable-color`	`colorTextDisabled`	Global Token
`@btn-disable-bg`	`colorBgContainerDisabled`	Global Token
`@btn-disable-border`	`borderColorDisabled`	-
`@btn-default-ghost-color`	`defaultGhostColor`	-
`@btn-default-ghost-bg`	`ghostBg`	-
`@btn-default-ghost-border`	`defaultGhostBorderColor`	-
`@btn-font-size-lg`	`fontSizeLG`	Global Token
`@btn-font-size-sm`	`fontSizeSM`	Global Token
`@btn-padding-horizontal-base`	`paddingInline`	-
`@btn-padding-horizontal-lg`	`paddingInlineLG`	-
`@btn-padding-horizontal-sm`	`paddingInlineSM`	-
`@btn-height-base`	`controlHeight`	Global Token
`@btn-height-lg`	`controlHeightLG`	Global Token
`@btn-height-sm`	`controlHeightSM`	Global Token
`@btn-line-height`	`lineHeight`	Global Token
`@btn-circle-size`	`controlHeight`	Global Token
`@btn-circle-size-lg`	`controlHeightLG`	Global Token
`@btn-circle-size-sm`	`controlHeightSM`	Global Token
`@btn-square-size`	`controlHeight`	Global Token
`@btn-square-size-lg`	`controlHeightLG`	Global Token
`@btn-square-size-sm`	`controlHeightSM`	Global Token
`@btn-square-only-icon-size`	`onlyIconSize`	-
`@btn-square-only-icon-size-sm`	`onlyIconSizeSM`	-
`@btn-square-only-icon-size-lg`	`onlyIconSizeLG`	-
`@btn-group-border`	`groupBorderColor`	-
`@btn-link-hover-bg`	`linkHoverBg`	-
`@btn-text-hover-bg`	`textHoverBg`	-

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`	-

Cascader

Less variables	Component Token	Note
`@cascader-bg`	-	Deprecated
`@cascader-item-selected-bg`	`optionSelectedBg`	-
`@cascader-menu-bg`	-	Deprecated
`@cascader-menu-border-color-split`	`colorSplit`	Global Token
`@cascader-dropdown-vertical-padding`	`optionPadding`	-
`@cascader-dropdown-edge-child-vertical-padding`	`menuPadding`	-
`@cascader-dropdown-font-size`	-	Deprecated
`@cascader-dropdown-line-height`	`lineHeight`	Global Token

Checkbox

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

Collapse

Less variables	Component Token	Note
`@collapse-header-padding`	`headerPadding`	-
`@collapse-header-padding-extra`	-	Depreacated
`@collapse-header-bg`	`headerBg`	-
`@collapse-content-padding`	`contentPadding`	-
`@collapse-content-bg`	`contentBg`	-
`@collapse-header-arrow-left`	-	Deprecated

DatePicker

Less variables	Component Token	Note
`@picker-bg`	`colorBgContainer`	Global Token
`@picker-basic-cell-hover-color`	`cellHoverBg`	-
`@picker-basic-cell-active-with-range-color`	`cellActiveWithRangeBg`	-
`@picker-basic-cell-hover-with-range-color`	`cellHoverWithRangeBg`	-
`@picker-basic-cell-disabled-bg`	`cellBgDisabled`	-
`@picker-border-color`	`colorSplit`	Global Token
`@picker-date-hover-range-border-color`	`cellRangeBorderColor`	-
`@picker-date-hover-range-color`	`cellHoverWithRangeColor`	-
`@picker-time-panel-column-width`	`timeColumnWidth`	-
`@picker-time-panel-column-height`	`timeColumnHeight`	-
`@picker-time-panel-cell-height`	`timeCellHeight`	-
`@picker-panel-cell-height`	`cellHeight`	-
`@picker-panel-cell-width`	`cellWidth`	-
`@picker-text-height`	`textHeight`	-
`@picker-panel-without-time-cell-height`	`withoutTimeCellHeight`	-

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`	-

Divider

Less variables	Component Token	Note
---	---	---
`@divider-text-padding`	`textPaddingInline`	-
`@divider-orientation-margin`	`orientationMargin`	-
`@divider-color`	`colorSplit`	Global Token
`@divider-vertical-gutter`	`verticalMarginInline`	-

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`	GlobalToken
`@dropdown-menu-submenu-disabled-bg`	`colorBgElevated`	GlobalToken
`@dropdown-selected-bg`	`controlItemBgActive`	GlobalToken

Empty

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

Form

Less variables	Component Token	Note
`@label-required-color`	`labelRequiredMarkColor`	-
`@label-color`	`labelColor`	-
`@form-warning-input-bg`	-	Deprecated
`@form-item-margin-bottom`	`itemMarginBottom`	-
`@form-item-trailing-colon`	-	Deprecated
`@form-vertical-label-padding`	`verticalLabelPadding`	-
`@form-vertical-label-margin`	`verticalLabelMargin`	-
`@form-item-label-font-size`	`labelFontSize`	-
`@form-item-label-height`	`labelHeight`	-
`@form-item-label-colon-margin-right`	`labelColonMarginInlineEnd`	-
`@form-item-label-colon-margin-left`	`labelColonMarginInlineStart`	-
`@form-error-input-bg`	-	Deprecated

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`	-

Input

Less variables	Component Token	Note
`@input-height-base`	`controlHeight`	Global Token
`@input-height-lg`	`controlHeightLG`	Global Token
`@input-height-sm`	`controlHeightSM`	Global Token
`@input-padding-horizontal`	`paddingInline`	-
`@input-padding-horizontal-base`	`paddingInline`	-
`@input-padding-horizontal-sm`	`paddingInlineSM`	-
`@input-padding-horizontal-lg`	`paddingInlineLG`	-
`@input-padding-vertical-base`	`paddinBlock`	-
`@input-padding-vertical-sm`	`paddingBlockSM`	-
`@input-padding-vertical-lg`	`paddingBlockLG`	-
`@input-placeholder-color`	`colorTextPlaceholder`	Global Token
`@input-color`	`colorText`	Global Token
`@input-icon-color`	-	已废弃
`@input-border-color`	`colorBorder`	Global Token
`@input-bg`	`colorBgContainer`	Global Token
`@input-addon-bg`	`addonBg`	-
`@input-hover-border-color`	`hoverBorderColor`	-
`@input-disabled-bg`	`colorBgContainerDisabled`	Global Token
`@input-outline-offset`	`activeShadow`	Control box-shadow when active
`@input-icon-hover-color`	`colorIconHover`	Global Token
`@input-disabled-color`	`colorTextDisabled`	Global Token

InputNumber

Less variables	Component Token	Note
`@input-number-hover-border-color`	`hoverBorderColor`	-
`@input-number-handler-active-bg`	`handleActiveBg`	-
`@input-number-handler-hover-bg`	`handleHoverColor`	Wrong usage in 4.x, which is actually text color
`@input-number-handler-bg`	`handleBg`	-
`@input-number-handler-border-color`	`handleBorderColor`	-

Layout

Less variables	Component Token	Note
`@layout-body-background`	`bodyBg`	-
`@layout-header-background`	`headerBg`	-
`@layout-header-height`	`headerHeight`	-
`@layout-header-padding`	`headerPadding`	-
`@layout-header-color`	`headerColor`	-
`@layout-footer-padding`	`footerPadding`	-
`@layout-footer-background`	`footerBg`	-
`@layout-sider-background`	`siderBg`	-
`@layout-trigger-height`	`triggerHeight`	-
`@layout-trigger-background`	`triggerBg`	-
`@layout-trigger-color`	`triggerColor`	-
`@layout-zero-trigger-width`	`zeroTriggerWidth`	-
`@layout-zero-trigger-height`	`zeroTriggerHeight`	-
`@layout-sider-background-light`	`lightSiderBg`	-
`@layout-trigger-background-light`	`lightTriggerBg`	-
`@layout-trigger-color-light`	`lightTriggerColor`	-

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`	`colorBgElevated`	GlobalToken
`@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

Progress

Less variables	Component Token	Note
`@progress-default-color`	`defaultColor`	-
`@progress-remaining-color`	`remainingColor`	-
`@progress-info-text-color`	`colorText`	Global Token
`@progress-text-color`	`circleTextColor`	-
`@progress-radius`	`lineBorderRadius`	-
`@progress-steps-item-bg`	`remainingColor`	-
`@progress-text-font-size`	`fontSizeSM`	Global Token
`@progress-circle-text-font-size`	`circleTextFontSize`	-

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`	`buttonCheckedBgDisabled`	-
`@radio-disabled-button-checked-color`	`buttonCheckedColorDisabled`	-
`@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`	-

Select

Less variables	Component Token	Note
`@select-border-color`	`colorBorder`	Global Token
`@select-item-selected-color`	`optionSelectedColor`	-
`@select-item-selected-font-weight`	`optionSelectedFontWeight`	-
`@select-dropdown-bg`	`colorBgElevated`	Global Token
`@select-item-selected-bg`	`optionSelectedBg`	-
`@select-item-active-bg`	`optionActiveBg`	-
`@select-dropdown-vertical-padding`	`optionPadding`	Control the whole padding
`@select-dropdown-font-size`	`optionFontSize`	-
`@select-dropdown-line-height`	`optionLineHeight`	-
`@select-dropdown-height`	`optionHeight`	-
`@select-background`	`selectorBg`	-
`@select-clear-background`	`clearBg`	-
`@select-selection-item-bg`	`multipleItemBg`	-
`@select-selection-item-border-color`	`multipleItemBorderColor`	-
`@select-single-item-height-lg`	`singleItemHeightLG`	-
`@select-multiple-item-height`	`multipleItemHeight`	-
`@select-multiple-item-height-lg`	`multipleItemHeightLG`	-
`@select-multiple-item-spacing-half`	-	Deprecated
`@select-multiple-disabled-background`	`multipleSelectorBgDisabled`	-
`@select-multiple-item-disabled-color`	`multipleItemColorDisabled`	-
`@select-multiple-item-disabled-border-color`	`multipleItemBorderColorDisabled`	-

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 variables	Component Token	Note
`@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

Spin

Less variables	Component Token	Note
`@spin-dot-size-sm`	`dotSizeSM`	-
`@spin-dot-size`	`dotSize`	-
`@spin-dot-size-lg`	`dotSizeLG`	-

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

Switch

Less variables	Component Token	Note
`@switch-height`	`trackHeight`	-
`@switch-sm-height`	`trackHeightSM`	-
`@switch-min-width`	`trackMinWidth`	-
`@switch-sm-min-width`	`trackMinWidthSM`	-
`@switch-disabled-opacity`	`opacityLoading`	Global Token
`@switch-color`	`colorPrimary`	Global Token
`@switch-bg`	`handleBg`	-
`@switch-shadow-color`	`handleShadow`	Control `box-shadow`, not only shadow color
`@switch-padding`	`trackPadding`	-
`@switch-inner-margin-min`	`innerMinMargin`	-
`@switch-inner-margin-max`	`innerMaxMargin`	-
`@switch-sm-inner-margin-min`	`innerMinMarginSM`	-
`@switch-sm-inner-margin-max`	`innerMaxMarginSM`	-

Table

Less variables	Component Token	Note
`@table-bg`	`colorBgContainer`	Global Token
`@table-header-bg`	`headerBg`	-
`@table-header-color`	`headerColor`	-
`@table-header-sort-bg`	`headerSortActiveBg`	-
`@table-body-sort-bg`	`bodySortActiveBg`	-
`@table-row-hover-bg`	`rowHoverBg`	-
`@table-selected-row-color`	`colorText`	Global Token
`@table-selected-row-bg`	`rowSelectedBg`	-
`@table-body-selected-sort-bg`	-	Deprecated, same as `rowSelectedBg`
`@table-selected-row-hover-bg`	`rowSelectedHoverBg`	-
`@table-expanded-row-bg`	`rowExpandedBg`	-
`@table-padding-vertical`	`cellPaddingBlock`	-
`@table-padding-horizontal`	`cellPaddingInline`	-
`@table-padding-vertical-md`	`cellPaddingBlockMD`	-
`@table-padding-horizontal-md`	`cellPaddingInlineMD`	-
`@table-padding-vertical-sm`	`cellPaddingBlockSM`	-
`@table-padding-horizontal-sm`	`cellPaddingInlineSM`	-
`@table-border-color`	`borderColor`	-
`@table-border-radius-base`	`headerBorderRadius`	-
`@table-footer-bg`	`footerBg`	-
`@table-footer-color`	`footerColor`	-
`@table-header-bg-sm`	-	Deprecated, same as `headerBg`
`@table-font-size`	`cellFontSize`	-
`@table-font-size-md`	`cellFontSizeMD`	-
`@table-font-size-sm`	`cellFontSizeSM`	-
`@table-header-cell-split-color`	`headerSplitColor`	-
`@table-header-sort-active-bg`	`headerSortHoverBg`	Misused in v4, and used as hover bg actually
`@table-fixed-header-sort-active-bg`	`fixedHeaderSortActiveBg`	-
`@table-header-filter-active-bg`	`headerFilterHoverBg`	-
`@table-filter-btns-bg`	-	Deprecated, same as `filterDropdownBg`
`@table-filter-dropdown-bg`	`filterDropdownBg`	-
`@table-expand-icon-bg`	`expandIconBg`	-
`@table-selection-column-width`	`selectionColumnWidth`	-
`@table-sticky-scroll-bar-bg`	`stickyScrollBarBg`	-
`@table-sticky-scroll-bar-radius`	`stickyScrollBarBorderRadius`	-

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

Tree

Less variables	Component Token	Note
`@tree-bg`	`colorBgContainer`	Global Token
`@tree-title-height`	`titleHeight`	-
`@tree-child-padding`	-	Deprecated
`@tree-directory-selected-color`	`directoryNodeSelectedColor`	-
`@tree-directory-selected-bg`	`directoryNodeSelectedBg`	-
`@tree-node-hover-bg`	`nodeHoverBg`	-
`@tree-node-selected-bg`	`nodeSelectedBg`	-

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`	-

contributors

Less variables to Component Token

Less variables to Component Token

How to use Component Token

Component Token

Alert

Anchor

Avatar

Badge

BreadCrumb

Button

Calendar

Card

Carousel

Cascader

Checkbox

Collapse

DatePicker

Descriptions

Divider

Drawer

Dropdown

Empty

Form

Image

Input

InputNumber

Layout

List

Mentions

Menu

Message

Modal

Pagination

Popover>

Progress

Radio

Rate

Result

Segment

Select

Skeleton

Slider

Spin

Statistic

Step

Switch

Table

Tabs

Tag

Timeline

Tooltip

Transfer

Tree

Typography

Upload

How to use Component Token

Component Token

Alert

Anchor

Avatar

Badge

BreadCrumb

Button

Calendar

Card

Carousel

Cascader

Checkbox

Collapse

DatePicker

Descriptions

Divider

Drawer

Dropdown

Empty

Form

Image

Input

InputNumber

Layout