Skip to main content

Badge

Default badge (primary / blue)​

<Badge text="New" />
New

Primary badge (explicit)​

<Badge text="New" color="primary" />
New

Secondary badge​

<Badge text="Draft" color="secondary" />
Draft

Success badge​

<Badge text="Stable" color="success" />
Stable

Warning badge​

<Badge text="Experimental" color="warning" />
Experimental

Danger badge​

<Badge text="Deprecated" color="danger" />
Deprecated

Badge inline with text​

Docs Intro <Badge text="New" />

Docs Intro New

Badge inside a list (your screenshot case)​

- <Badge text="New" />
- <Badge text="Beta" color="warning" />
- <Badge text="Deprecated" color="danger" />
  • New
  • Beta
  • Deprecated 
- <Link to="/docs/intro">
    Docs Intro <Badge text="New" />
  </Link>