# Component/Badge

> Props: component-badge.props.txt

## Examples


### Fill

```tsx
{
  render: args => <Stack direction='row' align='center'>
      {Object.keys(badge_color_css).map(color => {
      return <Stack direction='column' gap={16} p={12} align='center' key={color}>
            <Badge {...args} size='large' color={color as BadgeColor} />
            <Badge {...args} size='medium' color={color as BadgeColor} />
            <Badge {...args} color={color as BadgeColor} />
          </Stack>;
    })}
      {Object.keys(badge_color_css).map(color => {
      return <Stack direction='column' gap={16} p={12} align='center' key={color}>
            <Badge {...args} size='large' shape='rectangle' color={color as BadgeColor} />
            <Badge {...args} size='medium' shape='rectangle' color={color as BadgeColor} />
            <Badge {...args} shape='rectangle' color={color as BadgeColor} />
          </Stack>;
    })}
    </Stack>,
  args: {
    kind: 'outline',
    children: 'Label'
  },
  args: {
    kind: 'fill',
    children: 'Label'
  }
}
```

### Icon

```tsx
{
  args: {
    size: 'small'
  },
  render: args => <Stack direction='row' align='center'>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} kind='fill' color='red' endIcon={<IconArrowIncrease />}>
          134
        </Badge>
        <Badge {...args} kind='fill' color='red' endIcon={<IconArrowDecrease />}>
          143
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} kind='fill' color='blue' endIcon={<IconArrowIncrease />}>
          134
        </Badge>
        <Badge {...args} kind='fill' color='blue' endIcon={<IconArrowDecrease />}>
          143
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} color='green' endIcon={<IconCircleFill />}>
          Label
        </Badge>
        <Badge {...args} color='green' endIcon={<IconCircleFill />}>
          Label
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} color='pink' endIcon={<IconCircleFill />}>
          Label
        </Badge>
        <Badge {...args} color='pink' endIcon={<IconCircleFill />}>
          Label
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} shape='rectangle' kind='fill' color='red' endIcon={<IconArrowIncrease />}>
          134
        </Badge>
        <Badge {...args} shape='rectangle' kind='fill' color='red' endIcon={<IconArrowDecrease />}>
          143
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} shape='rectangle' kind='fill' color='blue' endIcon={<IconArrowIncrease />}>
          134
        </Badge>
        <Badge {...args} shape='rectangle' kind='fill' color='blue' endIcon={<IconArrowDecrease />}>
          143
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} shape='rectangle' color='green' endIcon={<IconCircleFill />}>
          Label
        </Badge>
        <Badge {...args} shape='rectangle' color='green' endIcon={<IconCircleFill />}>
          Label
        </Badge>
      </Stack>
      <Stack direction='column' gap={16} p={12}>
        <Badge {...args} shape='rectangle' color='pink' endIcon={<IconCircleFill />}>
          Label
        </Badge>
        <Badge {...args} shape='rectangle' color='pink' endIcon={<IconCircleFill />}>
          Label
        </Badge>
      </Stack>
    </Stack>
}
```

### Outline

```tsx
{
  render: args => <Stack direction='row' align='center'>
      {Object.keys(badge_color_css).map(color => {
      return <Stack direction='column' gap={16} p={12} align='center' key={color}>
            <Badge {...args} size='large' color={color as BadgeColor} />
            <Badge {...args} size='medium' color={color as BadgeColor} />
            <Badge {...args} color={color as BadgeColor} />
          </Stack>;
    })}
      {Object.keys(badge_color_css).map(color => {
      return <Stack direction='column' gap={16} p={12} align='center' key={color}>
            <Badge {...args} size='large' shape='rectangle' color={color as BadgeColor} />
            <Badge {...args} size='medium' shape='rectangle' color={color as BadgeColor} />
            <Badge {...args} shape='rectangle' color={color as BadgeColor} />
          </Stack>;
    })}
    </Stack>,
  args: {
    kind: 'outline',
    children: 'Label'
  }
}
```