## Import

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

## Live Editor

```jsx
<Badge badgeContent={4}>
  <Calendar size="md" />
</Badge>
```

## Examples

### Color

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

```jsx
<div style={{ display: "flex", gap: 32 }}>
  <Badge badgeContent={1} color="primary" />
  <Badge badgeContent={2} color="secondary" />
</div>
```

### Border

Pass `border` to add a border to the `Badge`.

```jsx
<div
  style={{
    display: "flex",
    gap: 32,
    backgroundColor: "#ecedee",
    padding: 32,
    width: "fit-content",
  }}
>
  <Badge badgeContent={1} color="primary" border />
  <Badge badgeContent={2} color="secondary" border />
</div>
```

### Placement

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

```jsx
<div style={{ display: "flex", gap: 32}}>
  <Badge badgeContent={4} placement="topRight">
    <Calendar size="md" />
  </Badge>
  <Badge badgeContent={4} placement="topLeft">
    <Calendar size="md" />
  </Badge>
  <Badge badgeContent={4} placement="bottomRight">
    <Calendar size="md" />
  </Badge>
  <Badge badgeContent={4} placement="bottomLeft">
    <Calendar size="md" />
  </Badge>
</>
```

### Large Content

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

```jsx
<Badge badgeContent="99+" color="primary">
  <Calendar size="md" />
</Badge>
```

### Controlled / Toggle

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`.

```jsx
function ToggleExample() {
  const [hide, setHide] = React.useState(true);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        width: "fit-content",
      }}
    >
      <Badge hide={!hide} badgeContent={4}>
        <Calendar size="md" />
      </Badge>

      <Button onPress={() => setHide((prevState) => !prevState)} size="sm">
        Toggle
      </Button>
    </div>
  );
}
```

## Props

### Badge

| 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.&#xA;Example roles include "button", "navigation", "dialog", etc. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |