Button

Installation

Usage

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

<Button variant="outline">Button</Button>

Variants

Use the variant prop to set how much the button stands out. Use one primary per view.

Size

Use the size prop to change the size of the button.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Icon

Use an icon-* size for a button with only an icon. Add an aria-label.

<Button size="icon-md" aria-label="Search">
  <HugeiconsIcon icon={Search01Icon} size={sizes.icon} aria-hidden />
</Button>

With Icon

Add data-icon="inline-start" or data-icon="inline-end" to the icon for the correct spacing. Use sizes.iconXs at xs, sizes.iconSm at sm and sizes.icon otherwise.

<Button>
  <HugeiconsIcon
    icon={Add01Icon}
    size={sizes.icon}
    data-icon="inline-start"
    aria-hidden
  />
  New project
</Button>

Pill

Use corners="pill" to round the ends.

<Button corners="pill">Get started</Button>

Spinner

Render a Spinner inside the button to show it's loading. Add data-icon="inline-start" to the spinner, and disabled so it can't be pressed twice.

<Button disabled>
  <Spinner data-icon="inline-start" />
  Saving
</Button>

As Link

Use buttonStyles to make a link look like a button.

Don't use <Button render={<a />} nativeButton={false} /> for links. Base UI's Button always sets role="button", so screen readers announce it as a button, not a link.

import * as stylex from "@stylexjs/stylex";
import { buttonStyles } from "@/components/ui/button";

<a href="/settings" {...stylex.props(buttonStyles({ variant: "outline" }))}>
  Settings
</a>;

API Reference

Button

Takes every prop of Base UI's Button, plus:

buttonStyles

Returns the button's styles for stylex.props. Takes variant, size and corners, with the same defaults.