import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Star } from '@useblu/ocean-icons-react';
import Badge from '../Badge';

<Meta title="Components/Badge" component={Badge} />

# Badge APIs

The API documentation of the Badge React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Badge } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="count">
    <Badge count={0} />
    <br />
    <Badge count={1} />
    <br />
    <Badge count={99} />
    <br />
    <Badge count={123} />
    <br />
  </Story>
</Canvas>

## Texto

<Canvas>
  <Story name="text">
    <Badge>Your Text</Badge>
  </Story>
</Canvas>

## Color

<Canvas withSource="open" withToolbar>
  <Story name="color">
    <Badge count={99} />
    <br />
    <Badge count={99} color="brand" />
    <br />
    <Badge count={99} color="complementary" />
    <br />
    <Badge count={99} color="alert" />
    <br />
    <Badge count={99} color="neutral" />
    <br />
  </Story>
</Canvas>

## Texto com cores

<Canvas>
  <Story name="text-with-colors">
    <Badge color="brand">Your Text</Badge>
    <br />
    <Badge color="complementary">Your Text</Badge>
    <br />
    <Badge color="alert">Your Text</Badge>
    <br />
    <Badge color="neutral">Your Text</Badge>
  </Story>
</Canvas>

## Variations

<Canvas withSource="open" withToolbar>
  <Story name="variations">
    <Badge count={99} variation="tiny" />
    <br />
    <Badge count={99} variation="small" />
    <br />
    <Badge count={919} variation="small" />
    <br />
    <Badge count={99} variation="medium" />
    <br />
    <Badge count={919} variation="medium" />
    <br />
  </Story>
</Canvas>

## CSS

| Global class            | Description                                                   |
| ----------------------- | ------------------------------------------------------------- |
| .ods-tag                | Styles applied to the root element.                           |
| .ods-tag--default       | Styles applied to the root element with a default type.       |
| .ods-tag--primary       | Styles applied to the root element with a primary type.       |
| .ods-tag--complementary | Styles applied to the root element with a complementary type. |
| .ods-tag--negative      | Styles applied to the root element with a negative type.      |
| .ods-tag--warning       | Styles applied to the root element with a warning type.       |
| .ods-tag--positive      | Styles applied to the root element with a positive type.      |
| .ods-tag\_\_icon        | Styles applied to the icon element.                           |
| .ods-tag\_\_content     | Styles applied to the content element.                        |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Badge/Badge.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      children: 'Lorem ipsum',
    }}
  >
    {(props) => <Badge {...props} />}
  </Story>
</Canvas>
