Badge

Copy for LLM

Badge is used to indicate statuses, notifications, or counts associated with other UI elements.

Import

import { Badge } from "@cfa/react-core";

There are two colors: "primary" as default, and "secondary".

Pass border to add a border to the Badge.

There are four placement options: "topRight" as default and "topLeft" | "bottomRight" | "bottomLeft".

It is recommended to use a ”+” for any content value larger than two digits.

Use the hide prop to control the state of the Badge. The Badge will animate-in when hide={true} and animate-out when set to false.

Visit the Documentation Site for the full list of props.

Name	Type	Default	Description
badgeContent	`ReactNode`	-	The Badge content, primarily a number 0-99(+).
border	`boolean`	`false`	Change the border of Badge to white.
children	`ReactNode`	-	The content or child elements nested within this component.
className	`string`	-	CSS class names to apply custom styling.
color	`"primary" \| "secondary"`	`"primary"`	The background color of the Badge.
hide	`boolean`	`false`	Set to true, to hide the component. Useful when toggling on/off.
id	`string`	-	The unique identifier for the DOM element.
placement	`"topRight" \| "topLeft" \| "bottomRight" \| "bottomLeft"`	`"topRight"`	The placement of the Badge in relation to its children anchor.
role	`AriaRole`	-	The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
style	`CSSProperties`	-	Inline styles specified as a React-compatible CSS properties object.