Button

Buttons 29

About

Trigger an action or event, such as submitting a form or displaying a dialog.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button to your project and fits it to your theme.

Code

How Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from "@/components/ui/button-1";

const ArrowUp = () => (
  <svg
    height="16"
    strokeLinejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
    />
  </svg>
);

export default function ShapesDemo() {
  return (
        <div className="flex justify-between items-center gap-2">
          <Button aria-label="Upload" shape="square" size="tiny" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="square" size="small" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="square" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="square" size="large" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="circle" size="tiny" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="circle" size="small" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="circle" svgOnly>
            <ArrowUp />
          </Button>
          <Button aria-label="Upload" shape="circle" size="large" svgOnly>
            <ArrowUp />
          </Button>
        </div>
  );
}