---
title: Badge
category: General
summary: Badges are used to inform users of the status of a piece of information or of an action that has been taken.
---

```jsx live
render(() => <Badge title="Badge" color="primary" />)
```

```jsx live
const { boxSizes } = designSystem
render(
  <StackView axis="horizontal" spacing={1}>
    {Object.keys(boxSizes).map((size) => (
      <Badge
        key={size}
        title={size}
        size={size}
        radius="circle"
        color="warning"
      />
    ))}
  </StackView>
)
```

```jsx live
render(() => (
  <StackView axis="horizontal" spacing={1}>
    <Badge
      title="M"
      size="sm"
      color={{ foreground: 'primary', background: 'transparent' }}
      stroke="primary"
      strokeAlign="inside"
      strokeWeight={1}
      radius="circle"
    />
    <Badge title="Ab" size="sm" color="primary" radius="circle" />
    <Badge title="A#-Ab" size="sm" color="primary" radius="pill" />
  </StackView>
))
```

```jsx live
render(() => (
  <Badge
    title="Bass Guitar"
    renderRight={
      <Button
        title="clear"
        icon={{ name: 'close' }}
        radiusLeft={0}
        onClick={() => alert('clear badge')}
      />
    }
  />
))
```