Components

Badge

Badge

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-badge

Example Usage

<Badge>Badge</Badge>

Colors

Primary
Secondary
Accent
Muted
Danger

Variants

Filled

There are four colors available for the filled variant primary, accent, muted and danger.

Primary

Secondary

Accent

Muted

Danger

<Badge variant="filled" color="primary">Primary</Badge>
<Badge variant="filled" color="secondary">Secondary</Badge>
<Badge variant="filled" color="accent">Accent</Badge>
<Badge variant="filled" color="muted">Munted</Badge>
<Badge variant="filled" color="danger">Danger</Badge>

Outline

There are four colors available for the outline variant primary, accent, muted and danger.

Primary

Secondary

Accent

Muted

Danger

<Badge variant="outlined" color="primary">Primary</Badge>
<Badge variant="outlined" color="secondary">Secondary</Badge>
<Badge variant="outlined" color="accent">Accent</Badge>
<Badge variant="outlined" color="muted">Muted</Badge>
<Badge variant="outlined" color="danger">Danger</Badge>

Text

There are four colors available for the text variant primary, accent, muted and danger.

Primary

Secondary

Accent

Muted

Danger

<Badge variant="text" color="primary">Primary</Badge>
<Badge variant="text" color="secondary">Secondary</Badge>
<Badge variant="text" color="accent">Accent</Badge>
<Badge variant="text" color="muted">Muted</Badge>
<Badge variant="text" color="danger">Danger</Badge>

Radius

Badge
Badge
Badge
Badge
<Badge radius="sm">Badge</Badge>
<Badge radius="md">Badge</Badge>
<Badge radius="lg">Badge</Badge>
<Badge radius="full">Badge</Badge>
Edit on GitHub

Previous

Avatar

Next

Button

On this page