FOLIO // NEXTUI

Badge

Inline label badge with five variants: ink, accent, cta, ghost, and parchment. Suited for tags, status labels, and category markers.

$npx @voltenworks/shipui add badge --theme folio
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/folio/demo/components#02-badge
Usage
TSX
<Badge variant="accent">Editorial</Badge>
Variants
<Badge variant="ink">Default</Badge>
<Badge variant="accent">Editorial</Badge>
<Badge variant="cta">New</Badge>
<Badge variant="ghost">Archived</Badge>
<Badge variant="parchment">Draft</Badge>
Source
TSX
import { cn } from '@/lib/utils'

type BadgeVariant = 'ink' | 'accent' | 'cta' | 'ghost' | 'parchment'

interface BadgeProps {
  variant?:   BadgeVariant
  className?: string
  children:   React.ReactNode
}

export function Badge({
  variant   = 'ink',
  className,
  children,
}: BadgeProps): React.JSX.Element {
  return (
    <span className={cn('folio-badge', `folio-badge-${variant}`, className)}>
      {children}
    </span>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from FOLIO // NEXT
FOLIO // NEXTUI

Button

Multi-variant button with primary, secondary, and ghost styles in three sizes. Renders as a Next.js Link when an href is provided.

FOLIO // NEXTUI

Card

Composable card container with sharp zero-radius corners in the FOLIO aesthetic. Pairs with folio-card-header, folio-card-body, and folio-card-footer CSS classes.

FOLIO // NEXTUI

Calendar

Interactive month-view calendar with previous/next navigation and day selection. Highlights today in forest green and the selected day in cognac.

FOLIO // NEXTUI

DateBlock

Magazine-style date display that renders month, day number, and weekday name in an editorial dateline layout. Server component.

FOLIO // NEXTUI

Pullquote

Editorial blockquote with ruled top and bottom borders and an optional attribution citation. Suited for testimonials and highlighted copy.

FOLIO // NEXTUI

Text

Polymorphic text primitive with body, caption, label, and code variants. Renders as any inline or block HTML tag via the `as` prop.

FOLIO // NEXTSection

Hero

Three-column editorial hero with a 44px spine, a full-width copy column, and a 380px table-of-contents sidebar. Includes a scrolling ticker strip and collapses to a single column on mobile.

FOLIO // NEXTSection

Features

Ledger-row feature list using a 56px index gutter, feature title, description, and a right-aligned tag. Roman numeral indexes reinforce the editorial aesthetic.

FOLIO // NEXTSection

About

Two-column about section with forest green background, a pullquote, and body copy. Pairs a narrative text column with a supporting details column.