Button

Usage

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

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

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";

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed
variant`?`	`Variant`	`default`	Set variant of button
color`?`	`Colors`	`undefined`	Set color of button
size`?`	`Variant`	`default`	Set size of button with tailwindcss

Source Codes

button.tsx

Button

Usage

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

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

Properties

Variant

Color

Size

Disabled

UnstyledButton

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";

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed
variant`?`	`Variant`	`default`	Set variant of button
color`?`	`Colors`	`undefined`	Set color of button
size`?`	`Variant`	`default`	Set size of button with tailwindcss