Button

A pill of glass. The accent variant is colored glass rather than flat paint, and every variant carries the pointer sheen.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/button.json

Examples

Variants

"use client";

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

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button>Glass</Button>
      <Button variant="accent">Accent</Button>
      <Button variant="film">Film</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Sizes

"use client";

import { ArrowRightIcon, PlusIcon } from "lucide-react";

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

export function ButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button variant="accent" size="lg">
        Continue <ArrowRightIcon />
      </Button>
    </div>
  );
}

API

<Button />

Prop	Type	Default	Description
variant	"glass" \| "accent" \| "film" \| "destructive" \| "ghost" \| "link"	"glass"	Visual treatment.
size	"sm" \| "default" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"	"default"	Control height and padding.
asChild	boolean	false	Render the child element with button styling.