Badges

The Badge component is used 77 times on 28 pages.

See all examples of pages that use Badge

Used 77 times.

Pages

/ai-gateway/get-started/ - Source
/ai-gateway/usage/universal/ - Source
/analytics/analytics-engine/sql-reference/aggregate-functions/ - Source
/analytics/analytics-engine/sql-reference/bit-functions/ - Source
/analytics/analytics-engine/sql-reference/date-time-functions/ - Source
/analytics/analytics-engine/sql-reference/encoding-functions/ - Source
/analytics/analytics-engine/sql-reference/mathematical-functions/ - Source
/analytics/analytics-engine/sql-reference/operators/ - Source
/analytics/analytics-engine/sql-reference/statements/ - Source
/analytics/analytics-engine/sql-reference/string-functions/ - Source
/analytics/analytics-engine/sql-reference/type-conversion-functions/ - Source
/cloudflare-one/insights/logs/ - Source
/cloudflare-one/remote-browser-isolation/isolation-policies/ - Source
/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/client-sessions/ - Source
/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/captive-portals/ - Source
/cloudflare-one/traffic-policies/egress-policies/ - Source
/cloudflare-one/traffic-policies/network-policies/ - Source
/cloudflare-one/traffic-policies/resolver-policies/ - Source
/dns/dns-firewall/analytics/ - Source
/learning-paths/secure-internet-traffic/build-http-policies/tls-inspection/ - Source
/learning-paths/secure-internet-traffic/connect-devices-networks/choose-on-ramp/ - Source
/rules/compression-rules/settings/ - Source
/stream/stream-live/start-stream-live/ - Source
/stream/viewing-videos/using-own-player/ - Source
/waf/analytics/security-analytics/ - Source
/workers/observability/logs/ - Source

Partials

src/content/partials/networking-services/mnm/get-started.mdx

Badges are a built-in component provided by Starlight ↗. Use them to indicate a product is in beta, for example.

Component

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

Note Success Tip Caution Danger Default

import { Badge } from "~/components";

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="Danger" variant="danger" />
<Badge text="Default" />

Badges can be added to the sidebar via page frontmatter.

---
title: Hello World
sidebar:
  badge:
    variant: tip
    text: New
---

If you want to add the Beta badge to a product, omit the variant: entry:

---
title: Hello World
sidebar:
  badge:
    text: Beta
---

Badges

Component

Sidebar