Badge API

Import

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

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

ref Section titled “ ref ” Ref<HTMLDivElement>: The ref type for this component.

BadgeProps

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

Defaults to 'base' .
size Section titled “ size ” 'small' | 'medium' | 'large': The size of the badge.

Defaults to 'medium' .
iconStart Section titled “ 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 Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ 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 Section titled “ 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 Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.