Button

Usage

Basic usage example to quickly see how the Button works.

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

export function ButtonDemo() {
  return <Button>Button</Button>;
}

Properties

Interactive configurator to explore customization options for the Button component.

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

export function ButtonDemo() {
  return <Button>Button</Button>;
}

UnstyledButton

UnstyledButton allows to provide its own style independent of all the styles and variant properties of Button. This can be very useful when you want to use it as a trigger for a tooltip or another toggle.

Used as asChild it helps to pass the button property to its single child.

"use client";
import { useState } from "react";
import { UnstyledButton } from "@/ui/button";

export function UnstyledButtonDemo() {
  const [loading, setLoading] = useState(false);
  return (
    <UnstyledButton
      loading={loading}
      onClick={() => {
        setLoading(true);
        setTimeout(() => setLoading(false), 2500);
      }}
    >
      UnstyledButton
    </UnstyledButton>
  );
}

API References

• mdn

Styles API

type Variant = "default" | "destructive" | "constructive" | "conservative" | "primitive" | "outline" | "ghost" | "link";
type Colors = "base" | "blue" | "green" | "red" | "default" | "grape" | "gradient-blue" | "gradient-orange" | "outline-base" | "outline-indigo" | "outline-teal";
type Size = "default" | "icon" | "sm" | "lg" | "badge";

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.