Opaline
Components

Button

Compact actions with clear hierarchy and precise pressed states.

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

<Button>Continue</Button>
<Button variant="outline">Open</Button>
<Button variant="ghost" size="icon-sm" aria-label="Settings">…</Button>

Use data-icon="inline-start" or data-icon="inline-end" on an icon when it sits beside a label. Icon-only buttons always need an accessible label.