Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Badge with Text (Outline) for Solid

An outline badge whose only content is the word Badge: a border, no fill, and foreground text.

UI library: Ark UI

The badge shows the word Badge with a thin border and no background. It is the outline variant, and there is no icon.

Put it on tags and categories that should be present without being loud. A sentence belongs in an Alert. In Solid, Ark UI keeps the label on one line.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Badge anatomy: root, icon, text

Usage

<Badge variant="outline">Badge</Badge>

FAQ

What does variant outline draw?

variant="outline" sets a border-border edge and text-foreground. It leaves the background unset, so the page shows through the badge.

Which variants add a fill?

default and secondary fill the badge. destructive, info, success and warning fill it and set the meaning. ghost and link are the other values.

How do I change the size or round it fully?

size takes sm, md or lg. pill rounds the badge fully. This demo sets neither, so you get the normal label.

Why doesn't the label wrap?

The badge is whitespace-nowrap, so the label stays one line. Shorten the text. A sentence belongs in an Alert.

Is the faint border a problem for screen readers?

No. Screen readers read the text, and the label uses text-foreground, the same color as body text. The border is only visual.

How does an outline badge sit inline?

It is inline-flex and w-fit, so it hugs the label on the same line as the text around it. shrink-0 keeps that border from collapsing in a tight row.

API Reference

Badge

Sets variant="outline". The rest is on the Badge page.

All 20 badge examples