Badge - defuss-shadcn

On this page (9)

Component Skill — components/badge/component-skill.md

Native basis

<span> element. No interactivity required - pure visual indicator.

Web Platform APIs

Classes

.badge

Variants (data-variant)

outlineColor variationsecondaryAlternate background stylingdefaultAlternate background styling

§Default

High emphasis with primary background.

§Secondary

Medium emphasis with secondary background.

§Outline

Low emphasis with border only.

§All Variants

Side-by-side comparison.

§Decorative

If a badge is purely visual, hide it from screen readers with aria-hidden.

§On a Button

Badge inside a .btn for notification counts.

§In a Card

Badge in a .card header for status display.

§Sizes

The full five-step scale via data-size - the default equals md.

§CSS view file

/* -- Badge component ------------------------------------------- */

@layer components {

  .badge {

    display: inline-flex;

    align-items: center;

    border-radius: 9999px;

    padding: 0.125rem 0.625rem;

    font-size: 0.6875rem;

    font-weight: 500;

    letter-spacing: 0.01em;

    line-height: 1.5rem;

    /* a pill never breaks its label or gets squeezed in a flex row (as in

       shadcn/ui) - a wrapped badge doubles its line-height into a lozenge */

    white-space: nowrap;

    flex-shrink: 0;

    /* -- Sizes: font, vertical padding and the line-height (which gives the

       pill its height) scale together. Default (no attribute) == md. */

    &[data-size="xs"] { font-size: 0.5625rem; padding: 0 0.375rem;    line-height: 1.125rem; }

    &[data-size="sm"] { font-size: 0.625rem;  padding: 0.0625rem 0.5rem; line-height: 1.25rem; }

    &[data-size="md"] { font-size: 0.6875rem; padding: 0.125rem 0.625rem; line-height: 1.5rem; }

    &[data-size="lg"] { font-size: 0.8125rem; padding: 0.1875rem 0.75rem; line-height: 1.75rem; }

    &[data-size="xl"] { font-size: 0.9375rem; padding: 0.25rem 0.875rem;  line-height: 2rem; }

    &[data-variant="outline"] {

      border: 1px solid var(--border);

      color: var(--muted-foreground);

    &[data-variant="secondary"] {

      background: var(--secondary);

      color: var(--secondary-foreground);

    &[data-variant="default"] {

      background: var(--primary);

      color: var(--primary-foreground);