Button

Preview

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

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

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/button

Usage

Fill

export const Fill = () => <Button variant="fill">Fill Button</Button>;

Pill

export const Pill = () => <Button variant="pill">Pill Button</Button>;

Link

export const Link = () => <Button variant="link">Link Button</Button>;

export const Menu = () => <Button variant="menu">Menu Button</Button>;

Sizes

export const Sizes = () => (
  <div className="flex flex-col gap-4 items-start">
    <Button size="xs">Extra Small</Button>
    <Button size="sm">Small</Button>
    <Button size="md">Medium</Button>
    <Button size="lg">Large</Button>
    <Button size="xl">Extra Large</Button>
  </div>
);

Variants

export const Variants = () => (
  <div className="flex flex-col gap-4 items-start">
    <Button variant="default">Default</Button>
    <Button variant="fill">Fill</Button>
    <Button variant="pill">Pill</Button>
    <Button variant="link">Link</Button>
    <Button variant="menu">Menu</Button>
  </div>
);

Disabled

export const Disabled = () => <Button isDisabled>Disabled Button</Button>;

Loading

export const Loading = () => <Button isLoading>Loading Button...</Button>;

States

export const States = () => (
  <div className="flex flex-col gap-4 items-start">
    <Button>Normal</Button>
    <Button isDisabled>Disabled</Button>
    <Button isLoading>Loading</Button>
  </div>
);

ModeProp

export const ModeProp = () => (
  <div className="flex flex-col gap-4 items-start">
    <Button mode="default">Default (mode)</Button>
    <Button mode="fill">Fill (mode)</Button>
    <Button mode="pill">Pill (mode)</Button>
    <Button mode="link">Link (mode)</Button>
    <Button mode="menu">Menu (mode)</Button>
  </div>
);

Props

Prop	Type	Default
All props from	`ButtonProps (extends React.ComponentProps<"button">)`	-

buttonVariants

Prop	Type	Default
All props from	`"button"`	-

Button

On this page