Skip to content
GitHub

Button

Displays a button or a component that looks like a button.

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


export default function ButtonPreview() {
  return (
    <Button>This is a Button</Button>
  );
}

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/button

Usage

Section titled “Usage”
import { Button } from "@/components/ui/pxl/button"
<Button variant="outline">Button</Button>

Size

Section titled “Size”

Use the size prop to change the size of the button.

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


export default function ButtonSizesExample() {
  return (
    <div className="w-full flex flex-col gap-4 items-center">
      <div className="flex flex-row flex-wrap gap-2.5">
        <Button size="4xs">4XS</Button>
        <Button size="3xs">3XS</Button>
        <Button size="2xs">2XS</Button>
        <Button size="xs">XS</Button>
        <Button size="sm">SM</Button>
        <Button size="md">MD</Button>
        <Button size="lg">LG</Button>
      </div>
      <div className="flex flex-row flex-wrap gap-2.5">
        <Button size="icon-xs">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path d="M10 18H8v-2h2zm-2-2H6v-2h2zm4-2v2h-2v-2zm-6 0H4v-2h2zm8 0h-2v-2h2zm2-2h-2v-2h2zm2-2h-2V8h2zm2-2h-2V6h2z"></path>
          </svg>
        </Button>
        <Button size="icon-sm">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path d="M10 18H8v-2h2zm-2-2H6v-2h2zm4-2v2h-2v-2zm-6 0H4v-2h2zm8 0h-2v-2h2zm2-2h-2v-2h2zm2-2h-2V8h2zm2-2h-2V6h2z"></path>
          </svg>
        </Button>
        <Button size="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path d="M10 18H8v-2h2zm-2-2H6v-2h2zm4-2v2h-2v-2zm-6 0H4v-2h2zm8 0h-2v-2h2zm2-2h-2v-2h2zm2-2h-2V8h2zm2-2h-2V6h2z"></path>
          </svg>
        </Button>
        <Button size="icon-lg">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path d="M10 18H8v-2h2zm-2-2H6v-2h2zm4-2v2h-2v-2zm-6 0H4v-2h2zm8 0h-2v-2h2zm2-2h-2v-2h2zm2-2h-2V8h2zm2-2h-2V6h2z"></path>
          </svg>
        </Button>
      </div>
    </div>
  );
}

Variants

Section titled “Variants”

Use the variant prop to change the colors of the button.

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


export default function ButtonVariantsExample() {
  return (
    <div className="flex flex-row flex-wrap gap-2.5">
      <Button variant="primary">Primary</Button>
      <Button variant="success">Success</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="info">Info</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Borders

Section titled “Borders”

Use the border prop to change the border of the button.

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


export default function ButtonBordersExample() {
  return (
    <div className="flex flex-row flex-wrap gap-2.5">
      <Button variant="default" border="none">None</Button>
      <Button variant="default" border="default">Default</Button>
      <Button variant="primary" border="outline">Outline</Button>
    </div>
  );
}

API Reference

Section titled “API Reference”

Button

Section titled “Button”

The Button component is a wrapper around the button element that adds a variety of styles and functionality.

Prop Type Default
variant "default" | "primary" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "success" | "warning" | "danger" "default"
size "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" "default"
border "default" | "none" | "outline" "default"