Badge

import { Badge } from 'ferry-ui'

export default function BadgeHero() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <span className="text-base font-medium text-foreground">Billing portal</span>
      <Badge font="mono" shape="square">
        Pro
      </Badge>
      <Badge variant="outline" font="mono">
        v2.4.1
      </Badge>
      <Badge variant="primary">New</Badge>
    </div>
  )
}

import { Badge } from 'ferry-ui'

export default function BadgeVariants() {
  return (
    <>
      <Badge>Default</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="success">Stable</Badge>
      <Badge variant="warning">Beta</Badge>
      <Badge variant="destructive">Deprecated</Badge>
      <Badge variant="info">Preview</Badge>
      <Badge variant="primary">New</Badge>
    </>
  )
}

import { Badge } from 'ferry-ui'

export default function BadgeFont() {
  return (
    <>
      <Badge>Pro</Badge>
      <Badge font="mono">Pro</Badge>
      <Badge variant="outline" font="mono">
        v2.4.1
      </Badge>
      <Badge variant="outline" font="mono">
        eu-west
      </Badge>
    </>
  )
}

import { Badge } from 'ferry-ui'

export default function BadgeShape() {
  return (
    <>
      <Badge shape="pill">Pill</Badge>
      <Badge shape="square">Square</Badge>
      <Badge variant="outline" shape="square" font="mono">
        EUR
      </Badge>
    </>
  )
}

import { Badge } from 'ferry-ui'

export default function BadgeCase() {
  return (
    <>
      <Badge variant="outline">Design team</Badge>
      <Badge variant="outline" case="normal">
        Design team
      </Badge>
      <Badge case="normal">3 seats left</Badge>
    </>
  )
}

import { Badge } from 'ferry-ui'
import { Lock, Sparkles, Users } from 'lucide-react'

export default function BadgeIcons() {
  return (
    <>
      <Badge variant="outline" case="normal">
        <Lock />
        Private
      </Badge>
      <Badge case="normal">
        <Users />8 members
      </Badge>
      <Badge variant="primary">
        <Sparkles />
        New
      </Badge>
    </>
  )
}

import { Badge } from 'ferry-ui'

export default function BadgeAsChild() {
  return (
    <Badge asChild variant="outline" case="normal">
      <a
        href="https://github.com/Carter2307/ferry-ui"
        target="_blank"
        rel="noreferrer"
        className="hover:bg-surface-200 hover:text-foreground"
      >
        Source code
      </a>
    </Badge>
  )
}

import { Badge } from 'ferry-ui'

const PLAN = 'Enterprise annual plan with priority support'

export default function BadgeLongText() {
  return (
    <div className="flex w-64 rounded-lg border bg-surface-100 p-3">
      {/* The badge takes the width of its parent at most. The full text stays in `title`. */}
      <Badge variant="outline" case="normal" className="max-w-full justify-start" title={PLAN}>
        <span className="truncate">{PLAN}</span>
      </Badge>
    </div>
  )
}

import { badgeVariants } from 'ferry-ui'

const TAGS = ['Design', 'Frontend', 'Roadmap', 'Customer request']

export default function BadgeClassHelper() {
  return (
    <ul aria-label="Tags" className="flex flex-wrap gap-1.5">
      {TAGS.map((tag) => (
        <li key={tag} className={badgeVariants({ variant: 'outline', case: 'normal' })}>
          {tag}
        </li>
      ))}
    </ul>
  )
}