Actionsduskmoonimplemented8 demos

Button

Button triggers primary, secondary, destructive, or icon-only actions.

Import@duskmoon-dev/components/button

5API sections

8documented props

5behavior scenarios

Key API

colorappearanceshapesizeblockisLoading

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Button is most often configured through `color`, `appearance`, `shape`, `size`.

Covered behavior

Renders children correctly

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

primary

secondary

tertiary

accent

neutral

base

info

success

warning

error

Colors

authored

Button supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function ButtonColorsDemo() {
  return (<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
  {colors.map((color) => (
    <Button key={color} color={color}>
      {color}
    </Button>
  ))}
</div>);
}

Preview

Basic usage

authored

Import the component stylesheet and Button from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

export function Example() {
  return (<Button color="primary">Save changes</Button>);
}

Preview

Renders children correctly

test-backed

Button scenario from the component test coverage: renders children correctly.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

export function ButtonRendersChildrenCorrectlyDemo() {
  return (<Button color="primary">Save changes</Button>);
}

Preview

Is disabled when loading

test-backed

Button scenario from the component test coverage: is disabled when loading.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

export function ButtonIsDisabledWhenLoadingDemo() {
  return (<Button color="primary">Save changes</Button>);
}

Preview

primary

secondary

tertiary

accent

neutral

base

info

success

warning

error

Applies color and appearance classes

test-backed

Button scenario from the component test coverage: applies color and appearance classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

export function ButtonAppliesColorAndAppearanceDemo() {
  return (<Button color="primary">Save changes</Button>);
}

Preview

Applies shape and size classes

test-backed

Button scenario from the component test coverage: applies shape and size classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

export function ButtonAppliesShapeAndSizeDemo() {
  return (<Button color="primary">Save changes</Button>);
}

Preview

Applies block class

test-backed

Button scenario from the component test coverage: applies block class.

Source

import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";

export function ButtonAppliesBlockClassDemo() {
  return (<Button color="primary">Save changes</Button>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Button color="primary">Save changes</Button>
</div>

<div data-theme="moonlight">
  <Button color="primary">Save changes</Button>
</div>

API

The API reference below lists every parsed exported type or interface for Button. Start with `color`, `appearance`, `shape`, `size` for common usage.

Types: packages/components/src/components/button/Button.types.tsScenarios: packages/components/src/components/button/Button.test.tsx

ButtonPropsinterface extends ComponentProps<"button">

Prop	Type	Required	Description
`color`	`ButtonColor`	No	color configures Button.
`appearance`	`ButtonAppearance`	No	appearance configures Button.
`shape`	`ButtonShape`	No	shape configures Button.
`size`	`ButtonSize`	No	size configures Button.
`block`	`boolean`	No	block configures Button.
`isLoading`	`boolean`	No	isLoading configures Button.
`leftIcon`	`React.ReactNode`	No	leftIcon configures Button.
`rightIcon`	`React.ReactNode`	No	rightIcon configures Button.

ButtonColortype

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

ButtonAppearancetype

"filled" | "outline" | "tonal" | "ghost" | "text"

ButtonShapetype

"rect" | "circle" | "square"

ButtonSizetype

"xs" | "sm" | "md" | "lg"