Buttons

Usage and anatomy

Button uses explicit parts so labels and icons remain independently composable. Use <Button.Root /> as the interactive element, <Button.Label /> for its text, and <Button.Icon /> for leading or trailing icons.

import * as Button from "@acme/ui/button"
import { Star } from "lucide-react"

<Button.Root>
  <Button.Icon position="start">
    <Star />
  </Button.Icon>
  <Button.Label>Button</Button.Label>
</Button.Root>

• Set loading on Button.Root to disable interaction and render the spinner automatically.
• Use asChild to apply Button styling to a single child such as a Next.js Link while preserving the child element's semantics.
• Use the Icon Button component for icon-only actions.

API reference

Button.Root

Button.Root also accepts native button props such as type, name, value, and form. Button.Icon accepts position="start" or position="end"; its size and loading state are inherited from Button.Root.