Badge API

Import

import { Badge } from '@cimpress-ui/react';

Displays a small piece of information, such as a status or a category.

BadgeProps

children * StringLikeChildren: The content to display as the label.
tone 'base' | 'info' | 'success' | 'warning' | 'critical' | 'brown' | 'indigo' | 'lime' | 'pink' | 'purple' | 'emerald': Determines the color tone of the badge.

Defaults to 'base' .
size 'small' | 'medium' | 'large': The size of the badge.

Defaults to 'medium' .
iconStart ReactNode: The icon to display at the start of the badge.

Should not be used when size is set to 'small' as icons won't be displayed at this size.
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

margin Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.