Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Label examples · Standard

Label with Badge for React

A label with a secondary badge that marks the setting as Beta.

Framework
UI library

Flag a field as Beta, Pro or New without changing its name. The Badge is a child of the Label, after Advanced Settings, so it sits on the caption's line and is read with it. Use it for experimental or paid settings.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the Beta badge attached?

It is a child of Label, after the text Advanced Settings. Badge uses variant="secondary" and the text Beta.

What spaces the badge from the caption?

Label is a flex row with gap-2. The demo adds no margin of its own, so the badge sits on the same line as the text.

Which badge variant is this?

secondary. That is the only badge in the file. Omit variant when the status should use the default badge.

Does the badge block the setting?

No. The file is the label and the badge. It does not render an input, and it does not check a plan.

What does a screen reader read?

The caption and the badge text, because both are inside the label: Advanced Settings, then Beta. The badge has no separate accessible name.

Can I add another badge in this label?

Yes. A second Badge is another flex child, so it sits on the same line with the same gap-2. This demo renders one.

All 8 label examples