# Badge

The `Badge` component displays a badge or a component that looks like a badge. It supports different variants for various badge styles.

## Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FTGNMV765NzwNamVdpw2y%2Fbadge.png?alt=media&#x26;token=010296e3-a111-4fab-8521-9b0bafac428d" alt="Gravity badge component" width="72"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Badge } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Badge variant='blue'>
      Badge Text
    </Badge>
  );
}
```

### Props

| Prop      | Description   | Required | Value                                                        |
| --------- | ------------- | -------- | ------------------------------------------------------------ |
| className | custom styles | optional | SCSS or Tailwind                                             |
| children  | badge text    | required | string                                                       |
| variant   | badge variant | optional | string (secondary/destructive/outline/red/blue/green/orange) |

### Notes

* The `Badge` component uses the `cn` function from `'components/lib'` to handle class names.
* The `variant` prop determines the styling of the badge.
* Custom styles can be applied using the `className` prop.
* For more details, refer to the [Shadcn Badge documentation.](https://ui.shadcn.com/docs/components/badge)