Tag
Tag
Importimport { Tag } from 'antd'; |
It can be used to tag by dimension or property.
When categorizing.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| closable | Whether to show the close button. An object can configure the close icon and aria-* attributes | boolean | ({ closeIcon?: ReactNode } & React.AriaAttributes) | false | - | ✔ |
| closeIcon | Custom close icon, as a shorthand for closable. When closable is not set, true shows the default close button, while null or false hides it (supported since 5.7.0) | ReactNode | false | 4.4.0 | 5.14.0 |
| color | Color of the Tag | string | default when variant="solid" | solid default color: 6.4.0 | × |
| disabled | Whether the tag is disabled | boolean | false | 6.0.0 | × |
| href | The address to jump when clicking, when this property is specified, the tag component will be rendered as an <a> tag | string | - | 6.0.0 | × |
| icon | Set the icon of tag | ReactNode | - | × | |
| onClose | Callback executed when tag is closed (can be prevented by e.preventDefault()) | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| target | Same as target attribute of a, works when href is specified | string | - | 6.0.0 | × |
| variant | Variant of the tag | 'filled' | 'solid' | 'outlined' | 'filled' | 6.0.0 | 6.0.0 |
Whether has border style, please use variant="filled" instead | boolean | true | - | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| checked | Checked status of Tag | boolean | false | |
| icon | Set the icon of tag | ReactNode | - | 5.27.0 |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| defaultValue | Initial value | string | number | Array<string | number> | null | - | |
| disabled | Disable check/uncheck | boolean | - | |
| multiple | Multiple select mode | boolean | - | |
| options | Option list. Object options support per-item className and style. | Array<{ className?: string; label: ReactNode; style?: CSSProperties; value: string | number } | string | number> | - | className and style: 6.4.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | |
| value | Value of checked tag(s) | string | number | Array<string | number> | null | - | |
| onChange | Callback when Tag is checked/unchecked | (value: string | number | Array<string | number> | null) => void | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| defaultBg | Default background color | string | #f5f5f5 |
| defaultColor | Default text color | string | rgba(0,0,0,0.88) |
| solidTextColor | Default text color for solid tag. | string | #fff |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainerDisabled | Control the background color of container in disabled state. | string | rgba(0,0,0,0.04) |
| colorBgSolid | Solid background color, currently only used for the default solid button background color. | string | rgb(0,0,0) |
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorBorderDisabled | Control the border color of the element in the disabled state. | string | #d9d9d9 |
| colorFillSecondary | The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc. | string | rgba(0,0,0,0.06) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryActive | Dark active state under the main color gradient. | string | #0958d9 |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightSM | Line height of small text. | number | 1.6666666666666667 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |