Zaidan

Button

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

Installation

CLI

npx shadcn@latest add @zaidan/button

pnpx shadcn add @zaidan/button

yarn dlx shadcn@latest add @zaidan/button

bunx shadcn@latest add @zaidan/button

Manual

Copy and paste the following code into your project.

1
import { type ButtonRootProps, Root } from "@kobalte/core/button";
2
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3
import { cva, type VariantProps } from "class-variance-authority";
4
import { type ComponentProps, splitProps, type ValidComponent } from "solid-js";
5
import { cn } from "~/lib/utils";
6

7
const buttonVariants = cva(
8
  "group/button z-button inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap outline-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
9
  {
10
    variants: {
11
      variant: {
12
        default: "z-button-variant-default",
13
        outline: "z-button-variant-outline",
14
        secondary: "z-button-variant-secondary",
15
        ghost: "z-button-variant-ghost",
16
        destructive: "z-button-variant-destructive",
17
        link: "z-button-variant-link",
18
      },
19
      size: {
20
        default: "z-button-size-default",
21
        xs: "z-button-size-xs",
22
        sm: "z-button-size-sm",
23
        lg: "z-button-size-lg",
24
        icon: "z-button-size-icon",
25
        "icon-xs": "z-button-size-icon-xs",
26
        "icon-sm": "z-button-size-icon-sm",
27
        "icon-lg": "z-button-size-icon-lg",
28
      },
29
    },
30
    defaultVariants: {
31
      variant: "default",
32
      size: "default",
33
    },
34
  },
35
);
36

37
type ButtonProps<T extends ValidComponent = "button"> = PolymorphicProps<T, ButtonRootProps<T>> &
38
  VariantProps<typeof buttonVariants> &
39
  Pick<ComponentProps<T>, "class">;
40

41
const Button = <T extends ValidComponent = "button">(props: ButtonProps<T>) => {
42
  const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"]);
43
  return (
44
    <Root
45
      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
46
      data-slot="button"
47
      {...others}
48
    />
49
  );
50
};
51

52
export { Button, type ButtonProps, buttonVariants };

Examples

Here are the source code of all the examples from the preview page:

Variants & Sizes

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

function ButtonVariantsAndSizes() {
  return (
    <Example title="Variants & Sizes">
      <div class="flex flex-wrap items-center gap-2">
        <Button size="xs">Default</Button>
        <Button size="xs" variant="secondary">
          Secondary
        </Button>
        <Button size="xs" variant="outline">
          Outline
        </Button>
        <Button size="xs" variant="ghost">
          Ghost
        </Button>
        <Button size="xs" variant="destructive">
          Destructive
        </Button>
        <Button size="xs" variant="link">
          Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="sm">Default</Button>
        <Button size="sm" variant="secondary">
          Secondary
        </Button>
        <Button size="sm" variant="outline">
          Outline
        </Button>
        <Button size="sm" variant="ghost">
          Ghost
        </Button>
        <Button size="sm" variant="destructive">
          Destructive
        </Button>
        <Button size="sm" variant="link">
          Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button>Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="link">Link</Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="lg">Default</Button>
        <Button size="lg" variant="secondary">
          Secondary
        </Button>
        <Button size="lg" variant="outline">
          Outline
        </Button>
        <Button size="lg" variant="ghost">
          Ghost
        </Button>
        <Button size="lg" variant="destructive">
          Destructive
        </Button>
        <Button size="lg" variant="link">
          Link
        </Button>
      </div>
    </Example>
  );
}

Icon Right

import { ArrowRight } from "lucide-solid";
import { Button } from "~/components/ui/button";

function ButtonIconRight() {
  return (
    <Example title="Icon Right">
      <div class="flex flex-wrap items-center gap-2">
        <Button size="xs">
          Default <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="xs" variant="secondary">
          Secondary <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="xs" variant="outline">
          Outline <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="xs" variant="ghost">
          Ghost <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="xs" variant="destructive">
          Destructive <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="xs" variant="link">
          Link <ArrowRight data-icon="inline-end" />
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="sm">
          Default
          <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="sm" variant="secondary">
          Secondary <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="sm" variant="outline">
          Outline
          <ArrowRight />
        </Button>
        <Button size="sm" variant="ghost">
          Ghost <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="sm" variant="destructive">
          Destructive <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="sm" variant="link">
          Link <ArrowRight data-icon="inline-end" />
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button>
          Default <ArrowRight data-icon="inline-end" />
        </Button>
        <Button variant="secondary">
          Secondary <ArrowRight data-icon="inline-end" />
        </Button>
        <Button variant="outline">
          Outline <ArrowRight data-icon="inline-end" />
        </Button>
        <Button variant="ghost">
          Ghost <ArrowRight data-icon="inline-end" />
        </Button>
        <Button variant="destructive">
          Destructive <ArrowRight data-icon="inline-end" />
        </Button>
        <Button variant="link">
          Link <ArrowRight data-icon="inline-end" />
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="lg">
          Default <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="lg" variant="secondary">
          Secondary <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="lg" variant="outline">
          Outline <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="lg" variant="ghost">
          Ghost <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="lg" variant="destructive">
          Destructive <ArrowRight data-icon="inline-end" />
        </Button>
        <Button size="lg" variant="link">
          Link <ArrowRight data-icon="inline-end" />
        </Button>
      </div>
    </Example>
  );
}

Icon Left

import { ArrowLeftCircle } from "lucide-solid";
import { Button } from "~/components/ui/button";

function ButtonIconLeft() {
  return (
    <Example title="Icon Left">
      <div class="flex flex-wrap items-center gap-2">
        <Button size="xs">
          <ArrowLeftCircle data-icon="inline-start" /> Default
        </Button>
        <Button size="xs" variant="secondary">
          <ArrowLeftCircle data-icon="inline-start" /> Secondary
        </Button>
        <Button size="xs" variant="outline">
          <ArrowLeftCircle data-icon="inline-start" /> Outline
        </Button>
        <Button size="xs" variant="ghost">
          <ArrowLeftCircle data-icon="inline-start" /> Ghost
        </Button>
        <Button size="xs" variant="destructive">
          <ArrowLeftCircle data-icon="inline-start" /> Destructive
        </Button>
        <Button size="xs" variant="link">
          <ArrowLeftCircle data-icon="inline-start" /> Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="sm">
          <ArrowLeftCircle data-icon="inline-start" /> Default
        </Button>
        <Button size="sm" variant="secondary">
          <ArrowLeftCircle data-icon="inline-start" /> Secondary
        </Button>
        <Button size="sm" variant="outline">
          <ArrowLeftCircle data-icon="inline-start" /> Outline
        </Button>
        <Button size="sm" variant="ghost">
          <ArrowLeftCircle data-icon="inline-start" /> Ghost
        </Button>
        <Button size="sm" variant="destructive">
          <ArrowLeftCircle data-icon="inline-start" /> Destructive
        </Button>
        <Button size="sm" variant="link">
          <ArrowLeftCircle data-icon="inline-start" /> Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button>
          <ArrowLeftCircle data-icon="inline-start" /> Default
        </Button>
        <Button variant="secondary">
          <ArrowLeftCircle data-icon="inline-start" /> Secondary
        </Button>
        <Button variant="outline">
          <ArrowLeftCircle data-icon="inline-start" /> Outline
        </Button>
        <Button variant="ghost">
          <ArrowLeftCircle data-icon="inline-start" /> Ghost
        </Button>
        <Button variant="destructive">
          <ArrowLeftCircle data-icon="inline-start" /> Destructive
        </Button>
        <Button variant="link">
          <ArrowLeftCircle data-icon="inline-start" /> Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="lg">
          <ArrowLeftCircle data-icon="inline-start" /> Default
        </Button>
        <Button size="lg" variant="secondary">
          <ArrowLeftCircle data-icon="inline-start" /> Secondary
        </Button>
        <Button size="lg" variant="outline">
          <ArrowLeftCircle data-icon="inline-start" /> Outline
        </Button>
        <Button size="lg" variant="ghost">
          <ArrowLeftCircle data-icon="inline-start" /> Ghost
        </Button>
        <Button size="lg" variant="destructive">
          <ArrowLeftCircle data-icon="inline-start" /> Destructive
        </Button>
        <Button size="lg" variant="link">
          <ArrowLeftCircle data-icon="inline-start" /> Link
        </Button>
      </div>
    </Example>
  );
}

Icon Only

import { ArrowRight } from "lucide-solid";
import { Button } from "~/components/ui/button";

function ButtonIconOnly() {
  return (
    <Example title="Icon Only">
      <div class="flex flex-wrap items-center gap-2">
        <Button size="icon-xs">
          <ArrowRight />
        </Button>
        <Button size="icon-xs" variant="secondary">
          <ArrowRight />
        </Button>
        <Button size="icon-xs" variant="outline">
          <ArrowRight />
        </Button>
        <Button size="icon-xs" variant="ghost">
          <ArrowRight />
        </Button>
        <Button size="icon-xs" variant="destructive">
          <ArrowRight />
        </Button>
        <Button size="icon-xs" variant="link">
          <ArrowRight />
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="icon-sm">
          <ArrowRight />
        </Button>
        <Button size="icon-sm" variant="secondary">
          <ArrowRight />
        </Button>
        <Button size="icon-sm" variant="outline">
          <ArrowRight />
        </Button>
        <Button size="icon-sm" variant="ghost">
          <ArrowRight />
        </Button>
        <Button size="icon-sm" variant="destructive">
          <ArrowRight />
        </Button>
        <Button size="icon-sm" variant="link">
          <ArrowRight />
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="icon">
          <ArrowRight />
        </Button>
        <Button size="icon" variant="secondary">
          <ArrowRight />
        </Button>
        <Button size="icon" variant="outline">
          <ArrowRight />
        </Button>
        <Button size="icon" variant="ghost">
          <ArrowRight />
        </Button>
        <Button size="icon" variant="destructive">
          <ArrowRight />
        </Button>
        <Button size="icon" variant="link">
          <ArrowRight />
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="icon-lg">
          <ArrowRight />
        </Button>
        <Button size="icon-lg" variant="secondary">
          <ArrowRight />
        </Button>
        <Button size="icon-lg" variant="outline">
          <ArrowRight />
        </Button>
        <Button size="icon-lg" variant="ghost">
          <ArrowRight />
        </Button>
        <Button size="icon-lg" variant="destructive">
          <ArrowRight />
        </Button>
        <Button size="icon-lg" variant="link">
          <ArrowRight />
        </Button>
      </div>
    </Example>
  );
}

Invalid States

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

function ButtonInvalidStates() {
  return (
    <Example title="Invalid States">
      <div class="flex flex-wrap items-center gap-2">
        <Button size="xs" aria-invalid="true">
          Default
        </Button>
        <Button size="xs" variant="secondary" aria-invalid="true">
          Secondary
        </Button>
        <Button size="xs" variant="outline" aria-invalid="true">
          Outline
        </Button>
        <Button size="xs" variant="ghost" aria-invalid="true">
          Ghost
        </Button>
        <Button size="xs" variant="destructive" aria-invalid="true">
          Destructive
        </Button>
        <Button size="xs" variant="link" aria-invalid="true">
          Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="sm" aria-invalid="true">
          Default
        </Button>
        <Button size="sm" variant="secondary" aria-invalid="true">
          Secondary
        </Button>
        <Button size="sm" variant="outline" aria-invalid="true">
          Outline
        </Button>
        <Button size="sm" variant="ghost" aria-invalid="true">
          Ghost
        </Button>
        <Button size="sm" variant="destructive" aria-invalid="true">
          Destructive
        </Button>
        <Button size="sm" variant="link" aria-invalid="true">
          Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button aria-invalid="true">Default</Button>
        <Button variant="secondary" aria-invalid="true">
          Secondary
        </Button>
        <Button variant="outline" aria-invalid="true">
          Outline
        </Button>
        <Button variant="ghost" aria-invalid="true">
          Ghost
        </Button>
        <Button variant="destructive" aria-invalid="true">
          Destructive
        </Button>
        <Button variant="link" aria-invalid="true">
          Link
        </Button>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <Button size="lg" aria-invalid="true">
          Default
        </Button>
        <Button size="lg" variant="secondary" aria-invalid="true">
          Secondary
        </Button>
        <Button size="lg" variant="outline" aria-invalid="true">
          Outline
        </Button>
        <Button size="lg" variant="ghost" aria-invalid="true">
          Ghost
        </Button>
        <Button size="lg" variant="destructive" aria-invalid="true">
          Destructive
        </Button>
        <Button size="lg" variant="link" aria-invalid="true">
          Link
        </Button>
      </div>
    </Example>
  );
}

Examples

import { ArrowRight } from "lucide-solid";
import { Button } from "~/components/ui/button";

function ButtonExamples() {
  return (
    <Example title="Examples">
      <div class="flex flex-wrap items-center gap-4">
        <div class="flex items-center gap-2">
          <Button variant="outline">Cancel</Button>
          <Button>
            Submit <ArrowRight data-icon="inline-end" />
          </Button>
        </div>
        <div class="flex items-center gap-2">
          <Button variant="destructive">Delete</Button>
          <Button size="icon">
            <ArrowRight data-icon="inline-end" />
          </Button>
        </div>
      </div>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.