Badge

import { BadgeDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Badge);

Usage

<Demo data={BadgeDemos.usage} /> <Gradient component="Badge" /> <Demo data={BadgeDemos.gradient} />

Rounded

Set the circle prop to reduce horizontal padding and make the badge width equal to its height:

<Demo data={BadgeDemos.rounded} />

Left and right sections

<Demo data={BadgeDemos.sections} />

Full width

Set fullWidth to make the badge span the full width of its parent element:

<Demo data={BadgeDemos.fullWidth} />

Customize variant colors

You can customize colors for Badge and other component variants by adding variantColorResolver to your theme.

<Demo data={BadgeDemos.variantColorsResolver} /> <AutoContrast component="Badge" /> <Demo data={BadgeDemos.autoContrast} /> <StylesApiSelectors component="Badge" /> <Demo data={BadgeDemos.stylesApi} />

<Polymorphic defaultElement="div" changeToElement="a" component="Badge" withNext />