Button

InstallationCopy Anchor Link

This also installs Spinner for the loading state.

UsageCopy Anchor Link

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

export default function Page() {
  return <Button>Submit request</Button>;
}

AnatomyCopy Anchor Link

Root (<button type="button">, or any element through render), an optional Icon before or after the Label, and a Spinner that replaces the leading icon while loading.

ExamplesCopy Anchor Link

StylesCopy Anchor Link

DestructiveCopy Anchor Link

Add destructive for actions that delete or cannot be undone. Every style except neutral has a destructive version; neutral falls back to destructive primary.

On colourCopy Anchor Link

Add onColor on brand fills (background-primary, the nav header). Destructive labels are white there; the text carries the meaning.

SizesCopy Anchor Link

sm is 24px, md 32px (default) and lg 40px high.

StatesCopy Anchor Link

aria-pressed marks a toggle button (or data-selected in menus and groups), disabled blocks the action, loading shows progress.

loading swaps the leading icon for a spinner, keeps the width and ignores clicks. The button stays focusable.

IconsCopy Anchor Link

Mark a Hugeicons icon with data-icon="inline-start" or "inline-end". Icon-only buttons need iconOnly and an aria-label.

As a linkCopy Anchor Link

To make a link look like a button, render an anchor with the render prop:

<Button nativeButton={false} render={<a href="/services" />}>
  Services
</Button>

RTLCopy Anchor Link

Icons, gaps and padding swap sides on their own (logical properties). Directional icons such as arrows do not: add rtl:-scale-x-100.

AccessibilityCopy Anchor Link

• Native <button type="button">: the button role and its label are announced.
• Focus ring on :focus-visible only: 2px border-black (white in dark mode and on brand fills), 1px gap.
• Icon-only buttons need an aria-label; icons are hidden from screen readers.
• aria-pressed marks a pressed toggle. loading sets aria-busy and aria-disabled; the spinner is decorative.

API ReferenceCopy Anchor Link

buttonVariants() is exported for styling other elements as buttons.

Deviations from DGACopy Anchor Link

ContrastCopy Anchor Link