p-button-21

PreviousNext

Card-style button with heading and description

Docs
cossblock

Preview

Loading preview…
registry/default/particles/p-button-21.tsx
import { ChevronRightIcon } from "lucide-react";

import { Button } from "@/registry/default/ui/button";

export default function Particle() {
  return (
    <Button
      className="group h-auto! gap-4 px-4 py-3 text-left"
      variant="outline"
    >
      <div className="flex flex-col gap-0.5">
        <h3>Talent Agency</h3>
        <p className="whitespace-break-spaces font-normal text-muted-foreground">
          Matches for your roster
        </p>
      </div>
      <ChevronRightIcon
        aria-hidden="true"
        className="transition-transform group-hover:translate-x-0.5"
      />
    </Button>
  );
}

Installation

npx shadcn@latest add @coss/p-button-21

Usage

import { PButton21 } from "@/components/p-button-21"
<PButton21 />