Badge Component
Display badge component with different styles and types.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
value | string | number | '' | The value to display inside the badge. |
type | 'pill' | 'numeral' | 'dot' | 'pill' | The type of the badge. |
variant | 'success' | 'error' | 'info' | 'warning' | 'inverse' | 'inverse' | The variant style of the badge. |
priority | 'high' | 'low' | 'high' | The priority level of the badge. |
leadingIcon | boolean | false | Whether to show an icon before the badge value. |
CSS Parts
| Name | Description |
|---|---|
badge | The main badge element. |
icon | The icon inside the badge. |
Check this link to learn how to use CSS parts for Badge Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-font-family | --tap-sys-font-family | Font family of the badge. |
--tap-badge-line-height | --tap-sys-typography-body-xs-height | Line height of the badge text. |
--tap-badge-font-size | --tap-sys-typography-body-xs-size | Font size of the badge text. |
--tap-badge-font-weight | --tap-sys-typography-body-xs-weight | Font weight of the badge text. |
--tap-badge-color | --tap-sys-color-content-primary | Text color of the badge. |
--tap-badge-border-radius | --tap-sys-radius-4 | Border radius of the badge. |
--tap-badge-icon-margin | --tap-sys-spacing-2 | Margin around the icon. |
--tap-badge-pill-numeral-border-radius | --tap-sys-radius-4 | Border radius for pill and numeral types. |
--tap-badge-pill-numeral-vertical-padding | --tap-sys-spacing-2 | Vertical padding for pill and numeral types. |
--tap-badge-pill-numeral-horizontal-padding | --tap-sys-spacing-4 | Horizontal padding for pill and numeral types. |
--tap-badge-dot-width | 6px | Width of the dot type badge. |
--tap-badge-dot-height | 6px | Height of the dot type badge. |
--tap-badge-dot-margin | 3px | Margin around the dot type badge. |
--tap-badge-info-background-color | --tap-sys-color-surface-accent | Background color for info variant. |
--tap-badge-info-color | --tap-sys-color-content-on-negative | Text color for info variant. |
--tap-badge-success-background-color | --tap-sys-color-surface-positive | Background color for success variant. |
--tap-badge-success-color | --tap-sys-color-content-on-negative | Text color for success variant. |
--tap-badge-error-background-color | --tap-sys-color-surface-negative | Background color for error variant. |
--tap-badge-error-color | --tap-sys-color-content-on-negative | Text color for error variant. |
--tap-badge-warning-background-color | --tap-sys-color-surface-warning | Background color for warning variant. |
--tap-badge-warning-color | --tap-sys-color-content-on-warning | Text color for warning variant. |
--tap-badge-inverse-background-color | --tap-sys-color-surface-disabled | Background color for inverse variant. |
--tap-badge-inverse-color | --tap-sys-color-content-tertiary | Text color for inverse variant. |
--tap-badge-info-low-background-color | --tap-sys-color-surface-accent-light | Background color for low priority info variant. |
--tap-badge-info-low-color | --tap-sys-color-content-accent | Text color for low priority info variant. |
--tap-badge-success-low-background-color | --tap-sys-color-surface-positive-light | Background color for low priority success variant. |
--tap-badge-success-low-color | --tap-sys-color-content-positive | Text color for low priority success variant. |
--tap-badge-error-low-background-color | --tap-sys-color-surface-negative-light | Background color for low priority error variant. |
--tap-badge-error-low-color | --tap-sys-color-content-negative | Text color for low priority error variant. |
--tap-badge-warning-low-background-color | --tap-sys-color-surface-warning-light | Background color for low priority warning variant. |
--tap-badge-warning-low-color | --tap-sys-color-content-warning | Text color for low priority warning variant. |