Skip to content
Cloudflare Docs

Inline badge

The InlineBadge component is used 4 times on 4 pages.

See all examples of pages that use InlineBadge

Used 4 times.

Pages

Partials

    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