Data Badge
Display a badge that spans the entire width of the parent component with a number field and text. There are two types of displays: large and medium.
- Import
import { DataBadge } from '@smile/haring-react'; - Extends Badge
- Source View Source Code
- Package @smile/haring-react
- Storybook Storybook
Storybook Docs
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | string | - | The text is displayed to the right of the number. |
| color | DefaultMantineColor | - | The color applied to the badge, and the contrast is automatically managed by the autoContrast prop of the Badge component. If the prop is not specified, the text color will be black, and there will be no backgroundColor. |
| number | number | - | The number value is displayed to the left of the text. The fit-content property and a margin-right are applied to the number tag. |
| size | "lg" | "md" | "md" | Controls the appearance of the component. Allows switching between two templates: "md" and "lg". |
| ratio | number | - | Manages the default width size of the number tag. |
| ... | - | - | extends Badge props |