Skip to content
Yuzur1ha Open

Component referenceDraft

Button

A button performs an action. Keep navigation in Link and let labels describe the result of activation.

Updated

Design notes

Primary actions use ink and paper. Secondary and text appearances share the same sizes; scaleOnPress can disable the press transform while retaining color feedback.

CloseButton is the fixed icon-only close action. Supply its accessible label; it always renders type="button".

Design sourceOpen in Figma

Button design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

Appearance

State

Size

Without scale

0

content/components/button/demo.tsx

import { useState } from "react"
import { Button } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function ButtonDemo() {
  const [count, setCount] = useState(0)
  return (
    <>
      <div className="demo-button-groups">
        <section className="demo-button-group" aria-label="Button appearances">
          <h2>Appearance</h2>
          <div className="demo-row">
            <Button onClick={() => setCount((value) => value + 1)}>
              Continue
            </Button>
            <Button
              appearance="secondary"
              onClick={() => setCount((value) => value + 1)}
            >
              Cancel
            </Button>
            <Button
              appearance="text"
              onClick={() => setCount((value) => value + 1)}
            >
              Text action
            </Button>
          </div>
        </section>
        <section className="demo-button-group" aria-label="Button states">
          <h2>State</h2>
          <div className="demo-row">
            <Button disabled>Disabled</Button>
            <Button loading>Loading…</Button>
          </div>
        </section>
        <section className="demo-button-group" aria-label="Button sizes">
          <h2>Size</h2>
          <div className="demo-row demo-button-sizes">
            {(["small", "medium", "large"] as const).map((size) => (
              <Button
                size={size}
                key={size}
                onClick={() => setCount((value) => value + 1)}
              >
                {size} action
              </Button>
            ))}
          </div>
        </section>
        <section
          className="demo-button-group"
          aria-label="Button press feedback"
        >
          <h2>Without scale</h2>
          <div className="demo-row">
            <Button
              scaleOnPress={false}
              onClick={() => setCount((value) => value + 1)}
            >
              No scale action
            </Button>
          </div>
        </section>
      </div>
      <DemoResult>{count}</DemoResult>
    </>
  )
}

API

Button

A native action button with loading and press feedback. Native button attributes and ref are forwarded; type defaults to button.

ButtonProps
PropertyTypeRequiredDefaultDescription
appearance"primary" | "secondary" | "text"No"primary"Visual treatment: solid primary, bordered secondary or text.
scaleOnPressbooleanNotrueAllow press scaling. Set false for navigation-like actions.
loadingbooleanNofalseShows a spinner, sets aria-busy and disables activation.
sizeComponentSizeNo"medium"Visual size: small, medium or large.
type"button" | "submit" | "reset"No"button"Native button behavior. Defaults to button to avoid accidental form submission.
disabledbooleanNo—Disables the native control.
namestringNo—Native form submission field name.
valuestring | number | readonly string[]No—Value submitted when this button is used as the form submitter.
onClickMouseEventHandler<HTMLButtonElement>No—Native activation handler.
childrenReactNodeNo—Content rendered inside the component.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
aria-labelstringNo—Accessible name when a visible label does not already name the element.
refRef<HTMLButtonElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

CloseButton

An icon-only close action. Always renders a native type="button" control; label supplies its accessible name.

CloseButtonProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Accessible name of the icon-only close action.
disabledbooleanNo—Disables the native control.
onClickMouseEventHandler<HTMLButtonElement>No—Native activation handler.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLButtonElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.