Button

Import

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

Usage Guidelines

When to use

• To trigger an action such as submitting a form, opening a dialog, or performing a destructive operation.
• When you need to visually communicate the importance of an action using variant (e.g., default for primary CTAs, secondary for less important actions, destructive for danger).
• As an icon-only action trigger using size="icon" — for example, a close or add button.

When NOT to use

• For navigation to another page — use an anchor (<a>) or your router's Link component instead. If you need link styling, use variant="link" or asChild with an anchor.
• As a toggle between two states — use Toggle or Switch instead.
• To display a status or label — use Badge instead.

Preview

Variants

The Button component supports several visual variants:

• default — Primary action button with the brand orange color and subtle gradient overlay
• destructive — For dangerous or irreversible actions
• outline — Bordered variant with primary color tint
• secondary — Neutral button for secondary actions
• ghost — Minimal button with no background
• link — Styled as a text link with underline on hover

Sizes

Source

As child

Use the asChild prop to render a different element (e.g., a link) with button styling:

<Button asChild>
  <a href="/docs">Go to docs</a>
</Button>

Props