Button

Primary, secondary, and danger actions with shared Steez button styling.

Actionsprimarysecondarydanger

Core button primitive with standard and cyberpunk-styled variants.

Preview

Loading preview…

Usage

Primary, secondary, and danger actions with shared Steez button styling.

<Button>Deploy</Button>
<Button variant="secondary">Preview</Button>
<Button variant="danger">Remove</Button>

Files

components/steez/Button.tsxcomponent

components/styles/Buttons.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { Button } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/button.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { Button } from "<project-root>/components/steez/Button";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/button.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Copy Button

Clipboard action with built-in copied state and icon feedback.

Theme Toggle

Shared light and dark mode switch with document-level persistence.

Error Message

Inline, card, and full-screen error surfaces with optional actions.