@aelig/button

Button

Add

pnpm dlx shadcn@latest add @aelig/button

A button primitive with variants, sizes, loading state, and optional Lucide icons.

Preview

Usage

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

export function Actions() {
  return (
    <div className="flex items-center gap-2">
      <Button icon="plus">Create</Button>
      <Button variant="outline">Preview</Button>
      <Button variant="ghost" size="icon" icon="settings">
        <span className="sr-only">Settings</span>
      </Button>
    </div>
  )
}

Variants and options

default

Primary action style.

outline

Bordered neutral action.

secondary

Lower emphasis filled action.

ghost

Minimal chrome for toolbar actions.

destructive

Dangerous or irreversible action.

link

Inline link-style action.

sizes

default, xs, sm, lg, icon, icon-xs, icon-sm, and icon-lg.