Inline badge

Recommendation: Avoid inline badges

Our current recommendation is to avoid inline badges, since they may hurt readability.

Guidelines:

• Mention beta/alpha/early access in the feature's main documentation page (use the <Badge> component for this purpose).
• If an additional reference is needed in the middle of the text, use "(beta)", with no special formatting, after the feature name.
• For instructions related to the feature (such as instructions on turning the feature on or off), you may mention again it's in beta, and also include "(beta)" in the side nav.

Example

Alpha Alpha

Beta Beta

Deprecated Deprecated

Early Access Early Access

Legacy Legacy

Custom Custom

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" />

### Custom <InlineBadge text="Custom" variant="success" />

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

Was this helpful?

What did you like?

Accurate

Easy to understand

Solved my problem

Helped me decide to use the product

Other

What went wrong?

Hard to understand

Incorrect information

Missing the information

Other

Thank you for helping improve Cloudflare's documentation!