Button

Displays a button or a component that looks like a button. Supports multiple variants, sizes, rounded styles, loading state and icon usage.

Installation

npx shadcn@latest add button

Usage

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

Default

<Button>Button</Button>

Variants

Base variants

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Heavy status

<Button variant="heavy-success">Success</Button>
<Button variant="heavy-warning">Warning</Button>
<Button variant="heavy-info">Info</Button>
<Button variant="heavy-error">Error</Button>

Light status

<Button variant="light-success">Success</Button>
<Button variant="light-warning">Warning</Button>
<Button variant="light-info">Info</Button>
<Button variant="light-error">Error</Button>

Outline status

<Button variant="outline-success">Success</Button>
<Button variant="outline-warning">Warning</Button>
<Button variant="outline-info">Info</Button>
<Button variant="outline-error">Error</Button>

Sizes

<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="default">Default</Button>
<Button size="lg">LG</Button>
<Button size="icon-xs"><Mail /></Button>
<Button size="icon-sm"><Mail /></Button>
<Button size="icon"><Mail /></Button>
<Button size="icon-lg"><Mail /></Button>

Rounded

<Button rounded="sm">Small</Button>
<Button rounded="md">Medium</Button>
<Button rounded="lg">Large</Button>
<Button rounded="xl">XL</Button>
<Button rounded="full">Full</Button>

With Icon

import { Mail, ChevronRight } from "lucide-react";
import { Tabs } from "nextra/components";
 
<Button><Mail /> Login with Email</Button>
<Button variant="outline">Next <ChevronRight /></Button>

Loading

<Button loading>Loading...</Button>
<Button variant="outline" loading>Saving</Button>

Disabled

<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled</Button>

API Reference

Props

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style of the button
`size`	`"xs" \| "sm" \| "default" \| "lg" \| "icon-xs" \| "icon-sm" \| "icon" \| "icon-lg"`	`"default"`	Size of the button
`rounded`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Border radius
`loading`	`boolean`	`false`	Show loading spinner, disables interaction
`disabled`	`boolean`	`false`	Disable the button
`asChild`	`boolean`	`false`	Render as child component via Radix Slot

Variants

Variant	Description
`default`	Primary action, filled background
`secondary`	Secondary action with border
`destructive`	Destructive/danger action
`outline`	Outlined, no background
`ghost`	No border, subtle hover
`link`	Looks like a hyperlink
`plain`	Minimal, no background or border
`icon`	Circular icon-only button
`heavy-success/warning/info/error`	Solid status color buttons
`light-success/warning/info/error`	Light tinted status buttons
`outline-success/warning/info/error`	Status colored border buttons

Overview Input