Skip to content
Cloudflare Docs

Inline badge

InlineBadge is used 9 times on 8 pages.

Pages which use InlineBadge

Component

To adopt this styling in a React component, apply the sl-badge class to a span element.

Alpha Alpha

Beta Beta

Deprecated Deprecated

Early Access Early Access

Legacy Legacy

Default Default

 
import { InlineBadge } from '~/components';


### Alpha <InlineBadge preset="alpha" />


### Beta <InlineBadge preset="beta" />


### Deprecated <InlineBadge preset="deprecated" />


### Early Access <InlineBadge preset="early-access" />


### Legacy <InlineBadge preset="legacy" />


### Default <InlineBadge text="Default" />

Inputs

Either preset or text and variant must be specified.

Presets

  • alpha

    • Text: Alpha
    • Variant success

  • beta

    • Text: Beta
    • Variant caution

  • deprecated

    • Text: Deprecated
    • Variant danger

  • early-access

    • Text: Early Access
    • Variant note

  • legacy

    • Text: Legacy
    • Variant danger

Text

Any string.

Variant

  • note

    • Color: Blue

  • tip

    • Color: Purple

  • danger

    • Color: Red

  • caution

    • Color: Orange

  • success

    • Color: Green