Badge

import { Avatar } from "macbetter/avatar"
import { BadgeAnchor, NotificationBadge } from "macbetter/badge"
import { Button } from "macbetter/button"
import { BellIcon, InboxIcon } from "lucide-react"

export default function Example() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
      <BadgeAnchor>
        <Avatar shape="app" size="xl" name="Mail" color="blue" />
        <NotificationBadge size="lg" count={12} label="unread messages" />
      </BadgeAnchor>
      <BadgeAnchor>
        <Avatar shape="app" size="xl" name="App Store" color="cyan" />
        <NotificationBadge size="lg" count={240} label="updates" />
      </BadgeAnchor>
      <BadgeAnchor>
        <Button variant="plain" tone="neutral" shape="circle" aria-label="Inbox">
          <InboxIcon aria-hidden="true" />
        </Button>
        <NotificationBadge count={3} label="new" />
      </BadgeAnchor>
      <BadgeAnchor>
        <Button variant="plain" tone="neutral" shape="circle" aria-label="Notifications">
          <BellIcon aria-hidden="true" />
        </Button>
        <NotificationBadge label="New notifications" />
      </BadgeAnchor>
    </div>
  )
}

import { Badge } from "macbetter/badge"

const colors = ["accent", "red", "yellow", "green", "teal", "blue", "indigo", "purple", "gray"] as const

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "start" }}>
      {(["tinted", "filled", "outline"] as const).map((variant) => (
        <div key={variant} style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {colors.map((color) => (
            <Badge key={color} variant={variant} color={color}>
              {color === "accent" ? "New" : color[0]?.toUpperCase() + color.slice(1)}
            </Badge>
          ))}
        </div>
      ))}
    </div>
  )
}

import { Badge } from "macbetter/badge"
import { SparklesIcon } from "lucide-react"

export default function Example() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Badge size="sm">Beta</Badge>
      <Badge>Beta</Badge>
      <Badge variant="filled">
        <SparklesIcon aria-hidden="true" />
        Pro
      </Badge>
      <Badge variant="filled" color="green">
        Paid
      </Badge>
    </div>
  )
}

import { Badge } from "macbetter/badge"

const services = [
  { name: "API", status: "Operational", color: "green" },
  { name: "Dashboards", status: "Degraded", color: "yellow" },
  { name: "Webhooks", status: "Outage", color: "red" },
  { name: "Exports", status: "Paused", color: "gray" },
] as const

export default function Example() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "auto auto", gap: "10px 32px", alignItems: "center" }}>
      {services.map((service) => (
        <div key={service.name} style={{ display: "contents" }}>
          <span>{service.name}</span>
          <Badge variant="dot" color={service.color}>
            {service.status}
          </Badge>
        </div>
      ))}
    </div>
  )
}