Badge

Server component, no client JS

ImportCopy Anchor Link

import { Badge } from '@nizivo/react/badge';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/badge.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

ExamplesCopy Anchor Link

import type { ComponentPropsWithRef, JSX } from 'react';
import { Badge } from '@nizivo/react/badge';

/** Stands in for a router link (Next `Link`, React Router `Link`). */
function Link({ children, ...props }: ComponentPropsWithRef<'a'>): JSX.Element {
  return <a {...props}>{children}</a>;
}

export function BadgeExample(): JSX.Element {
  return (
    <div>
      <Badge tone="success">Paid</Badge>
      <Badge tone="warning">Pending</Badge>
      <Badge tone="critical">Refunded</Badge>
      <Badge tone="info">Partially fulfilled</Badge>
      <Badge>Draft</Badge>
      <Badge tone="brand" dot={false}>
        New
      </Badge>
      <Badge render={<Link href="/orders?status=paid" />} tone="success">
        Paid
      </Badge>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

BadgeProps type

import type { BadgeProps } from '@nizivo/react/badge'

The props of Badge, listed above.

BadgeState type

import type { BadgeState } from '@nizivo/react/badge'

The render state of Badge, listed above.

BadgeTone type

import type { BadgeTone } from '@nizivo/react/badge'

Figma "Tone". brand is the only solid fill.

type BadgeTone = "neutral" | "success" | "warning" | "critical" | "info" | "brand"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-badge, .nz-badge-dot.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: Figma node 7275:11374
• Ghost masters: Figma node 744:315