Button · Tinyrack Design System

Contract

Axis	Values	Default	Use
`intent`	`neutral`, `primary`, `info`, `success`, `warning`, `danger`	`neutral`	Communicates the purpose or outcome of an action.
`appearance`	`solid`, `outline`, `ghost`	`solid`	Changes visual emphasis without changing intent.
`uiSize`	`md`, `lg`	`md`	Matches the size of surrounding controls.
`disabled`	`boolean`	`false`	Prevents the action.
`loading`	`boolean`	`false`	Prevents the action and communicates that it is in progress.

Install

pnpm add @tinyrack/ui

Scroll inside the code area to read long lines.

Styles

@import '@tinyrack/ui/components/button.css';

Scroll inside the code area to read long lines.

Imports

import { TRButton } from '@tinyrack/ui/components/button';

Scroll inside the code area to read long lines.

Playground

Usage

Basic action permalink

Use the primary intent for the main action. TRButton renders a native button by default.

Examples

Solid intents permalink

Use solid buttons for the strongest emphasis. They pair each intent fill with its on-color.

Outline intents permalink

Use outline buttons for visible actions with less emphasis. Their text and icons use the intent foreground role.

Ghost intents permalink

Use ghost buttons for low-emphasis actions on uncluttered surfaces.

Sizes permalink

Choose a size that matches nearby controls, not the importance of the action.

States permalink

Use disabled when an action is unavailable and loading while it is in progress.

API

Tinyrack props

Prop	Type	Default	Purpose
`intent`	`neutral \| primary \| info \| success \| warning \| danger`	`neutral`	Selects the action's semantic meaning and color role.
`appearance`	`solid \| outline \| ghost`	`solid`	Selects visual emphasis without changing the intent.
`uiSize`	`md \| lg`	`md`	Selects the button size.
`loading`	`boolean`	`false`	Prevents activation and exposes an in-progress state.
`loadingLabel`	`string`	none	Sets the accessible name while loading.
`variant`	`secondary \| primary \| danger`	`secondary`	Deprecated compatibility prop; use `intent` in new code.

HTML element and inherited props

TRButtonProps extends Base UI Button props.

Inherited prop	Default	Behavior
`disabled`	`false`	Prevents activation.
`focusableWhenDisabled`	`false`	Keeps a disabled button in the focus order when set to `true`.
`render`	none	Composes button behavior and styling onto another element or component.
`nativeButton`	`true`	Indicates whether the rendered element is a native `<button>`.
`type`	`button` for native buttons	Selects native button, submit, or reset behavior.

Native button attributes, React event handlers, state-aware className and style, and the React 19 ref are also supported.

By default, TRButton renders an HTML <button> with type="button". Set type="submit" or type="reset" intentionally inside a form. When render uses an element other than <button>, set nativeButton={false} so Base UI can provide button behavior without adding the native type attribute. This keeps button semantics; use TRLink for navigation.

Loading and accessible name

When loading is true, TRButton prevents activation, prepends an aria-hidden spinner, and sets aria-busy="true". Without loadingLabel, the existing accessible name stays unchanged. When loadingLabel is provided, it becomes the temporary accessible name and replaces aria-labelledby while loading. When loading is false, an explicit aria-busy value is preserved.

Legacy variant

The deprecated variant prop remains for compatibility. secondary maps to neutral; primary and danger map to the intents with the same names. An explicit intent takes precedence over variant.