Button

Button triggers a single action or event.

Use Button for important actions such as sending feedback, confirming a change or moving to the next step. To go to another page, use a link.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Button } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Appearance

primary for the main action, secondary (default), then outline, subtle and transparent for decreasing emphasis.

Size

small (24px), medium (32px, default), large (40px).

With icon

The icon sits before the label to support it. Icon-only buttons need an aria-label.

Shape

rounded (default), circular for FABs and floating toolbars, square for edge-to-edge toolbars.

Disabled

Disable a button only when people can tell why. Otherwise leave it enabled and report the problem on click.

Danger

An addition in this library (not in Fluent) for destructive actions that can't be undone.

Loading

Click a button: a Spinner replaces the icon (centered on buttons without one), the width stays the same, and the button stays focusable but ignores clicks. loadingText changes the label without shifting the layout.

Usage

Use at most one primary Button per area or screen.
Labels are short verbs that describe the result: “Save”, “Send invite”.
Place the primary action on the left (or on the right in a Dialog, following reading order).

Don't

Don't use Button for navigation. Use a link.
Don't change a Button's background color with className; use appearance.
Don't leave an icon-only Button without an aria-label or Tooltip.

Props

Prop · Type	Default	Description
appearance"secondary" \| "primary" \| "outline" \| "subtle" \| "transparent" \| "danger" \| "glass" \| "glass-prominent"	Default: "secondary"	How much emphasis the action gets. glass / glass-prominent (Yugen Labs): a button over content, see Foundations › Glass.
size"small" \| "medium" \| "large"	Default: "medium"	Height 24 / 32 / 40px.
shape"rounded" \| "circular" \| "square"	Default: "rounded"	Corner rounding.
iconReactNode	Default: —	Fluent icon (@fluentui/react-icons, size 20).
iconPosition"before" \| "after"	Default: "before"	Icon position relative to the label.
iconOnlyboolean	Default: auto	Turns on when there is an icon and no children.
asChildboolean	Default: false	Renders into the child element (e.g. <a>) instead of a <button>.
loadingboolean	Default: false	Busy state: a Spinner replaces the icon (or sits in the middle of the button), the width is kept, aria-busy and aria-disabled are set, and clicks are ignored while the button stays focusable.
loadingTextReactNode	Default: —	Label while loading (e.g. “Saving…”). The button is always as wide as the longer label, so nothing shifts.