eo-n/ui

import { Button } from "@/components/ui/button";
 
export function ButtonDemo() {
  return <Button>Button</Button>;
}

Installation

npx shadcn@latest add @eo-n/button

Usage

Import all parts and piece them together.

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

<Button>Button</Button>

Examples

Primary

import { Button } from "@/components/ui/button";
 
export function ButtonDemo() {
  return <Button>Button</Button>;
}

Secondary

import { Button } from "@/components/ui/button";
 
export function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>;
}

Destructive

import { Button } from "@/components/ui/button";
 
export function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>;
}

Ghost

import { Button } from "@/components/ui/button";
 
export function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>;
}

Outline

import { Button } from "@/components/ui/button";
 
export function ButtonOutline() {
  return <Button variant="outline">Outline</Button>;
}

Link

import { Button } from "@/components/ui/button";
 
export function ButtonLink() {
  return <Button variant="link">Link</Button>;
}

Icon

import { X } from "lucide-react";
 
import { Button } from "@/components/ui/button";
 
export function ButtonIcon() {
  return (
    <Button variant="outline" size="icon">
      <X />
    </Button>
  );
}

Loading

import { Loader2 } from "lucide-react";
 
import { Button } from "@/components/ui/button";
 
export function ButtonLoading() {
  return (
    <Button disabled>
      <Loader2 className="animate-spin" />
      Loading
    </Button>
  );
}

API Reference

Root

The main container component for handling button props.

Prop	Type	Default
`size?`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	`"default"`
`variant?`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	`"default"`

Button

On this page