Button

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

<Button variant="primary">Button</Button>

Primary

The default high-emphasis button.

variant="primary">Button</Button>

Secondary

Medium-emphasis button for secondary actions.

variant="secondary">Button</Button>

Outline

Low-emphasis button with a visible border.

variant="outline">Button</Button>

Ghost

Minimal button, background appears only on hover.

variant="ghost">Button</Button>

Link

Text-only button, underlines on hover.

variant="link">Button</Button>

Info

Draws attention for informational actions.

variant="info">Button</Button>

Success

Confirms a positive or completed action.

variant="success">Button</Button>

Warning

Used for actions that need caution.

variant="warning">Button</Button>

Destructive

Used for irreversible or dangerous actions.

variant="destructive">Button</Button>

With Leading Icon

Icon placed before the label.

leadingIcon={<IconCommand /}>Button</Button>

With Trailing Icon

Icon placed after the label.

trailingIcon={<IconCommand /}>Button</Button>

Icon Only

Compact square button, no visible label.

iconOnly={<IconCommand /} aria-label="Command"
/>

Disabled

Non-interactive state, reduced emphasis.

disabled>Button</Button>

Sizes

Small, Default and Large sizes.

<Button size="sm">Button</Button>
<Button size="default">Button</Button>
<Button size="lg">Button</Button>