---
name: Badge
route: /components/common/badge
edit: false
---

import { Playground, Props } from 'docz'
import Badge from './badge'

# Badge
**SUBCATEGORY:** Landmarks

<hr />

## Badge
### Description
Badges convey identity and provide additional visual context.
For use in place of article fly titles, or to brand a section of content.

<Playground>
  <Badge text='Badge name' />
</Playground>

<hr />

## Badge (brand)
### Description
Badges convey identity and provide additional visual context.
For use in place of article fly titles, or to brand a section of content.

<Playground>
  <Badge text='Badge name' variant='brand' />
</Playground>

<hr />

## Badge (sub-brand)
### Description
Badges convey identity and provide additional visual context.
For use in place of article fly titles, or to brand a section of content.

<Playground>
  <Badge text='Badge name' variant='sub-brand' />
</Playground>

<hr />

## Badge (report)
### Description
Badges convey identity and provide additional visual context.
For use in place of article fly titles, or to brand a section of content.

<Playground>
  <Badge text='Badge name' variant='report' />
</Playground>

<hr />

## Properties
<Props of={Badge} />