v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Data Display / badge

Built with: CSS

BadgeATM

A small visual indicator for status, labels, or counts. Built on a <span> element with variant styling via data-variant. No JavaScript required.

On this page (11)
Component Skill — components/badge/component-skill.md

Native basis

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

Web Platform APIs

<span>

Classes

.badge

Variants (data-variant)

outlineColor variationsecondaryAlternate background stylingdefaultAlternate background stylingdestructiveAlternate background styling

§Default

High emphasis with primary background.

§Secondary

Medium emphasis with secondary background.

§Outline

Low emphasis with border only.

§Destructive

High emphasis in the destructive color - warnings and pre-release tags.

§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.

§Beta Sticker

A rotated badge pinned over a logo - the wrapper is relative, the badge absolute and rotated.

§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);
    }
    &[data-variant="destructive"] {
      background: var(--destructive);
      color: var(--destructive-foreground);
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub