Button

Button uses Base UI behavior and Nesra’s light-mode styling.

Usage

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

export function SaveButton() {
  return <Button>Save changes</Button>;
}

Examples

Variants

Preview

PrimaryOutlineGhostDestructiveLink

Code

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

export function ButtonVariantsExample() {
  return (
    <>
      <Button>Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

Sizes

sm, md, and lg are 32, 40, and 44px tall. icon-* sizes are square. Default: md.

Preview

SmallMediumLarge

Code

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

export function ButtonSizesExample() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </>
  );
}

Icons

startIcon and endIcon are decorative. Icon-only buttons need an accessible name.

Preview

SaveContinue

Code

import { Button } from "@nesra/ui/button";
import { ArrowRight, CircleCheck } from "lucide-react";

export function ButtonIconsExample() {
  return (
    <>
      <Button startIcon={<CircleCheck size={20} />}>Save</Button>
      <Button endIcon={<ArrowRight size={20} />} variant="outline">
        Continue
      </Button>
      <Button aria-label="Confirm" size="icon-sm">
        <CircleCheck aria-hidden="true" size={16} />
      </Button>
      <Button aria-label="Confirm" size="icon-md">
        <CircleCheck aria-hidden="true" size={20} />
      </Button>
      <Button aria-label="Confirm" size="icon-lg">
        <CircleCheck aria-hidden="true" size={20} />
      </Button>
    </>
  );
}

Loading and disabled

loading sets aria-busy and prevents activation. It hides the child of an icon-only button, so keep its aria-label.

Preview

SubmittingUnavailableSubmitting

Code

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

export function ButtonStatesExample() {
  return (
    <>
      <Button loading>Submitting</Button>
      <Button disabled>Unavailable</Button>
      <Button loading variant="outline">
        Submitting
      </Button>
    </>
  );
}

Accessibility

• Use an anchor for navigation. The link variant changes appearance, not button semantics.
• Keep the keyboard focus state visible when extending styles.

API reference

Prop	Type	Default	Description
variant	"primary" | "outline" | "ghost" | "destructive" | "link"	"primary"	Visual style.
size	"sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg"	"md"	Height and padding; icon sizes are square.
children	ReactNode	—	Label or icon-only content.
startIcon	ReactNode	—	Decorative icon before the label.
endIcon	ReactNode	—	Decorative icon after the label.
loading	boolean	false	Shows a loader, sets aria-busy, and prevents activation.
disabled	boolean	false	Prevents interaction.
className	string	—	Adds or overrides classes.
type	"button" | "submit" | "reset"	"button"	Native button behavior in forms.

Other Base UI Button props and native button attributes, such as onClick and aria-label, are forwarded. The Button’s visual values come from the semantic color roles and shape and elevation tokens.