# Badge

Renders a badge with various styles and states according to the design guidelines.

### **Import**
```tsx
import { Badge } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Badge } from '@app-studio/web';

export const DefaultDemo = () => <Badge content="default" />;
```

### **content**
The content to be displayed within the badge.

- **Type:** `string | number`

```tsx
import React from 'react';
import { Badge } from '@app-studio/web';

export const ContentDemo = () => <Badge content="content" />;
```

### **variant**
Determines the styling variants a UI component can have, which could include filled, outlined, or ghost styles among others.

- **Type:** `Variant`
- **Default:** `filled`
- **Possible Values:** `filled, outline, link, ghost`

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { Badge } from '@app-studio/web';
import { Variant } from '@app-studio/web';
import { View } from 'app-studio';
export const VariantDemo = () => (
  <Vertical gap={15}>
    {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
      <View position={'relative'} key={index}>
        <Badge content={variant} variant={variant as Variant} />
      </View>
    ))}
  </Vertical>
);
```

### **position**
Lists possible positions for UI elements that can be placed in one of the corners of a container, like notification badges.

- **Type:** `Position`
- **Possible Values:** `top-right, top-left, bottom-right, bottom-left`

```tsx
import React from 'react';
import { Badge } from '@app-studio/web';
import { View } from 'app-studio';
import { Horizontal } from 'app-studio';
import { Position } from '@app-studio/web';

export const PositionDemo = () => (
  <Horizontal gap={10}>
    {['top-right', 'top-left', 'bottom-right', 'bottom-left'].map(
      (position, index) => (
        <View
          key={index}
          position="relative"
          height="100px"
          width="200px"
          backgroundColor="color-warmGray-100"
        >
          <Badge position={position as Position} content={position} />
        </View>
      )
    )}
  </Horizontal>
);
```

### **size**
Specifies available sizes for UI elements, catering to a range of scalability from extra small to extra large.

- **Type:** `Size`
- **Default:** `md`
- **Possible Values:** `xs, sm, md, lg, xl`

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { Badge } from '@app-studio/web';
import { Size } from '@app-studio/web';
import { View } from 'app-studio';
export const SizeDemo = () => (
  <Vertical gap={10}>
    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
      <View position="relative" key={index}>
        <Badge content={size} size={size as Size} />
      </View>
    ))}
  </Vertical>
);
```

### **children**
Renders children content inside the badge, allowing for custom compositions.

```tsx
import React from 'react';
import { Badge } from '@app-studio/web';
import { Text } from 'app-studio';

export const ChildrenDemo = () => (
  <Badge>
    <Text color="color-white">Custom Children</Text>
  </Badge>
);
```

### **icon**
Displays an icon within the badge layout.

```tsx
import React from 'react';
import { Badge } from '@app-studio/web';
import { View } from 'app-studio';

const Icon = () => (
  <View width="12px" height="12px" backgroundColor="currentColor" borderRadius="50%" />
);

export const IconDemo = () => (
    <Horizontal gap={10}>
        <Badge icon={<Icon />} content="With Icon" />
    </Horizontal>
);
```

### **pastil**
Shows a status dot (pastil) inside the badge. Can be a boolean or a specific status color string.

- **Type:** `boolean | string`
- **Possible Values:** `true, default, info, success, warning, error` or any color string

```tsx
import React from 'react';
import { Badge } from '@app-studio/web';
import { Horizontal } from 'app-studio';

export const PastilDemo = () => (
  <Horizontal gap={10}>
    <Badge pastil={true} content="Active" />
    <Badge pastil="success" content="Success" />
    <Badge pastil="warning" content="Warning" />
    <Badge pastil="error" content="Error" />
  </Horizontal>
);
```

### **shape**
Defines possible values for the shape of a UI component such as buttons or badges.

- **Type:** `Shape`
- **Default:** `pill`
- **Possible Values:** `square, rounded, pill`

```tsx
import React from 'react';
import { Horizontal } from 'app-studio';
import { Badge } from '@app-studio/web';
import { Shape } from '@app-studio/web';
import { View } from 'app-studio';
export const ShapeDemo = () => (
  <Horizontal gap={15}>
    {['square', 'rounded', 'pill'].map((shape, index) => (
      <View position="relative" key={index}>
        <Badge content={shape} shape={shape as Shape} />
      </View>
    ))}
  </Horizontal>
);
```