Button

A button component with multiple variants and sizes.

Installation

pnpm dlx stera-ui add button

Usage

import { Button } from "@/components/ui/button"
<Button variant="brand">Click me</Button>

Variants

VariantDescription
brandPrimary brand-colored button
accentAccent-colored button
outlineBordered button with transparent background
subtleSubtle background, no border
ghostNo background or border
dangerDestructive action button
linkStyled as a link

Sizes

SizeDescription
xsExtra small
smSmall
mdMedium (default)
lgLarge
iconSquare icon button
icon-xsExtra small icon button
icon-smSmall icon button
icon-lgLarge icon button

With Icons & Kbd

Disabled

API Reference

The Button component extends the native <button> element via Base UI's Button primitive, with additional props:

PropTypeDefault
variant"brand" | "accent" | "outline" | "subtle" | "ghost" | "danger" | "link""brand"
size"xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""md"
asChildbooleanfalse