Badge

Preview

New

Show code Copy

Installation

The badge ships for all three targets. Pick the tab for your project — the CLI detects which you are on and serves the matching implementation.

React

npx @nana-tec/ui add badge

Lands as src/components/ui/badge/badge.tsx, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Svelte

npx @nana-tec/ui add badge

Lands in src/lib/components/ui/badge/ as Badge.svelte, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Web Components

Install the package for a versioned dependency:

npm install @nana-tec/ui-components

Or copy the source in and own it:

npx @nana-tec/ui add badge

Usage

React

import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <>
      <Badge variant="primary">New</Badge>
      <Badge variant="success" dot>Live</Badge>
      <Badge variant="neutral" size="sm">Draft</Badge>
    </>
  );
}

dot prepends a small filled circle in the current colour. Every native <span> attribute passes through, and it forwards a ref.

Svelte

<script lang="ts">
  import { Badge } from '$lib/components/ui/badge';
</script>

<Badge variant="primary">New</Badge>
<Badge variant="success" dot>Live</Badge>
<Badge variant="neutral" size="sm">Draft</Badge>

dot prepends a small filled circle in the current colour. Every native attribute passes through via ...rest.

Web Components

import "@nana-tec/ui-components/badge";

<nana-badge variant="primary">New</nana-badge>

Note

The live previews on this page render the Web Components build, because that is what runs in a page without a framework runtime. The variants, sizes and states are identical across all three, so what you see is what you get in React and Svelte too.

Classes you pass to the React and Svelte components are merged with tailwind-merge, so an override wins rather than fighting. See Using Tailwind.

Variants

Primary Success Warning Danger Info Neutral

Show code Copy

API

The React and Svelte props, read from the components’ own types:

React

Badge

Prop	Type	Default
variant	BadgeVariant	'neutral'
size	BadgeSize	'md'
dot	boolean	false
children	ReactNode	—

Also accepts Omit<HTMLAttributes<HTMLSpanElement>, 'children'>.

Svelte

Badge

Prop	Type	Default
variant	BadgeVariant	'neutral'
size	BadgeSize	'md'
dot	boolean	false
children	Snippet	—

Also accepts Omit<HTMLAttributes<HTMLSpanElement>, 'class'>.

The attribute names, events and CSS hooks below are the Web Components reference.

Properties

Property	Attribute	Type	Default	Description
capsule	capsule	boolean	false	Capsule shape instead of fully rounded
dot	dot	boolean	false	Show a dot indicator before the text
interactive	interactive	boolean	false	Makes badge interactive with hover/focus states
outline	outline	boolean	false	Outline style with transparent background
pulse	pulse	boolean	false	Pulse animation for the dot (only when dot is true)
removable	removable	boolean	false	Removable badge with close button
size	size	BadgeSize	'md'	Size of the badge
variant	variant	BadgeVariant	'neutral'	Visual style variant

Slots

Slot	Description
(default)	Badge text content

CSS parts

Part	Description
::part(badge)	The badge container
::part(remove-button)	The remove button, when removable

CSS custom properties

Property	Description
--nana-badge-bg	Custom background color
--nana-badge-color	Custom text color
--nana-badge-border	Custom border color

Events

Event	Type
remove	CustomEvent

Slots

Slot	Description
(default)	Badge text content

CSS Variables

Variable	Description
--nana-badge-bg	Custom background color
--nana-badge-color	Custom text color
--nana-badge-border	Custom border color

CSS Parts

Part	Description
badge	The badge label
remove-button	The remove button (when removable)

Related components

• Alert
• Skeleton
• Tag
• Spinner
• Progress Bar

Storybook

Explore Badge interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook