---
title: Badges
description: Display sidebar and inline badges.
image: https://developers.cloudflare.com/cf-twitter-card.png
---

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt  
> Use this file to discover all available pages before exploring further. 

[Skip to content](#%5Ftop) 

# Badges

The `Badge` component is used `79` times on `30` pages. 

See all examples of pages that use Badge

Used **79** times. 

**Pages**

* [/ai-gateway/usage/universal/](https://developers.cloudflare.com/ai-gateway/usage/universal/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-gateway/usage/universal.mdx)
* [/analytics/analytics-engine/sql-reference/aggregate-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/aggregate-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/aggregate-functions.mdx)
* [/analytics/analytics-engine/sql-reference/bit-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/bit-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/bit-functions.mdx)
* [/analytics/analytics-engine/sql-reference/date-time-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/date-time-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/date-time-functions.mdx)
* [/analytics/analytics-engine/sql-reference/encoding-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/encoding-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/encoding-functions.mdx)
* [/analytics/analytics-engine/sql-reference/mathematical-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/mathematical-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/mathematical-functions.mdx)
* [/analytics/analytics-engine/sql-reference/operators/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/operators/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/operators.mdx)
* [/analytics/analytics-engine/sql-reference/statements/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/statements/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/statements.mdx)
* [/analytics/analytics-engine/sql-reference/string-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/string-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/string-functions.mdx)
* [/analytics/analytics-engine/sql-reference/type-conversion-functions/](https://developers.cloudflare.com/analytics/analytics-engine/sql-reference/type-conversion-functions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/analytics-engine/sql-reference/type-conversion-functions.mdx)
* [/cloudflare-one/insights/logs/](https://developers.cloudflare.com/cloudflare-one/insights/logs/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/insights/logs/index.mdx)
* [/cloudflare-one/remote-browser-isolation/isolation-policies/](https://developers.cloudflare.com/cloudflare-one/remote-browser-isolation/isolation-policies/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/remote-browser-isolation/isolation-policies.mdx)
* [/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/client-sessions/](https://developers.cloudflare.com/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/client-sessions/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/client-sessions.mdx)
* [/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/captive-portals/](https://developers.cloudflare.com/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/captive-portals/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/captive-portals.mdx)
* [/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/](https://developers.cloudflare.com/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/team-and-resources/devices/cloudflare-one-client/configure/settings/index.mdx)
* [/cloudflare-one/team-and-resources/devices/cloudflare-one-client/deployment/mdm-deployment/windows-no-auth-no-internet/](https://developers.cloudflare.com/cloudflare-one/team-and-resources/devices/cloudflare-one-client/deployment/mdm-deployment/windows-no-auth-no-internet/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/team-and-resources/devices/cloudflare-one-client/deployment/mdm-deployment/windows-no-auth-no-internet.mdx)
* [/cloudflare-one/traffic-policies/egress-policies/](https://developers.cloudflare.com/cloudflare-one/traffic-policies/egress-policies/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/traffic-policies/egress-policies/index.mdx)
* [/cloudflare-one/traffic-policies/network-policies/](https://developers.cloudflare.com/cloudflare-one/traffic-policies/network-policies/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/traffic-policies/network-policies/index.mdx)
* [/cloudflare-one/traffic-policies/resolver-policies/](https://developers.cloudflare.com/cloudflare-one/traffic-policies/resolver-policies/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/traffic-policies/resolver-policies.mdx)
* [/dns/dns-firewall/analytics/](https://developers.cloudflare.com/dns/dns-firewall/analytics/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/dns/dns-firewall/analytics.mdx)
* [/email-service/](https://developers.cloudflare.com/email-service/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/email-service/index.mdx)
* [/learning-paths/secure-internet-traffic/build-http-policies/tls-inspection/](https://developers.cloudflare.com/learning-paths/secure-internet-traffic/build-http-policies/tls-inspection/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/secure-internet-traffic/build-http-policies/tls-inspection.mdx)
* [/learning-paths/secure-internet-traffic/connect-devices-networks/choose-on-ramp/](https://developers.cloudflare.com/learning-paths/secure-internet-traffic/connect-devices-networks/choose-on-ramp/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/secure-internet-traffic/connect-devices-networks/choose-on-ramp.mdx)
* [/rules/compression-rules/settings/](https://developers.cloudflare.com/rules/compression-rules/settings/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/compression-rules/settings.mdx)
* [/stream/stream-live/start-stream-live/](https://developers.cloudflare.com/stream/stream-live/start-stream-live/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/stream/stream-live/start-stream-live.mdx)
* [/stream/viewing-videos/using-own-player/](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/stream/viewing-videos/using-own-player/index.mdx)
* [/waf/analytics/security-analytics/](https://developers.cloudflare.com/waf/analytics/security-analytics/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/waf/analytics/security-analytics.mdx)
* [/workers/observability/logs/](https://developers.cloudflare.com/workers/observability/logs/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/observability/logs/index.mdx)

**Partials**

* [src/content/partials/networking-services/mnm/get-started.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/mnm/get-started.mdx)

Badges are a built-in component provided by [Starlight ↗](https://starlight.astro.build/components/badges/). 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.

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

## Sidebar

Badges can be added to the sidebar via page frontmatter.

```
---title: Hello Worldsidebar:  badge:    variant: tip    text: New---
```

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

```
---title: Hello Worldsidebar:  badge:    text: Beta---
```

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/components/badges/#page","headline":"Badges · Cloudflare Style Guide","description":"Display sidebar and inline badges.","url":"https://developers.cloudflare.com/style-guide/components/badges/","inLanguage":"en","image":"https://developers.cloudflare.com/cf-twitter-card.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/badges/","name":"Badges"}}]}
```