Actions
Button
Triggers an action. Seven variants, from the violet primary to the gradient signature CTA, in five sizes plus icon-only sizes.
- Source
- src/components/ui/button.tsx
- Figma
- Button · variant × size × state (default, hover, focus, pressed, disabled, loading) · Leading / Trailing icon toggles. IconButton for icon-only.
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Button } from "@/components/ui/button";When to use
- Use the default (primary) variant for the single most important action in a view.
- Use outline or secondary for supporting actions next to a primary one.
- Use ghost for low-emphasis actions in toolbars, table rows and dense UI.
- Use gradient sparingly: it is the signature CTA, reserved for the main conversion action on a page.
- For navigation to another page, use a link (or Button with asChild wrapping a Link) so it behaves like a link.
- Do not place two primary buttons side by side; demote one to outline or secondary.
Examples
Sizes
xs to lg for app UI; xl is the rounded marketing CTA.
With icons
Place a lucide icon before or after the label. Icon-only buttons need an aria-label.
Disabled and loading
Disable while an action is running so it cannot fire twice. Tab to a button to see the focus ring.
As a link
Use asChild to give a Next.js Link the button styles while keeping link behavior.
API reference
Button
Extends every native button attribute (onClick, type, disabled, aria-*).
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "gradient" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "default" | Visual style. |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Height and padding. xl is the pill-shaped marketing CTA; icon sizes are square. |
| asChild | boolean | false | Render the child element (e.g. a Next.js Link) with button styles instead of a <button>. |
| disabled | boolean | false | Dims the button and blocks pointer events. |
Accessibility
- Renders a native <button>, so Enter and Space activate it and it is in the tab order by default.
- A visible 3px focus ring appears on keyboard focus only (focus-visible).
- Icon-only buttons must have an aria-label describing the action.
- When showing a loading state, keep the button disabled so it cannot be submitted twice.