Outline button with inline count badge, a shadcn block by @reui · shadcn.exchange

Outline button with inline count badge, a shadcn block by @reui · shadcn.exchange

c-button-45.tsx

import { Badge } from "@/components/reui/badge"

import { Button } from "@/components/ui/button"

export function Pattern() {
  return (
    <Button variant="outline" className="gap-2" aria-label="Messages (12)">
      Messages
      <Badge variant="destructive-outline" size="sm" aria-hidden="true">
        12
      </Badge>
    </Button>
  )
}