Badge

import {ReactNode} from "react"

import {QBadge} from "@qui/react"

export default function Kind(): ReactNode {
  return (
    <div className="grid justify-center py-4">
      <div className="grid grid-cols-3 gap-x-8 gap-y-4">
        <span className="text-primary q-font-heading-xs">Square</span>
        <span className="text-primary q-font-heading-xs">Round</span>
        <span className="text-primary q-font-heading-xs">Dot</span>

        <QBadge color="brand">NEW</QBadge>
        <QBadge color="brand" kind="counter">
          42
        </QBadge>
        <QBadge color="brand" kind="dot" />
      </div>
    </div>
  )
}