hyzrui
GitHub
HomeDocsButton

Actions

Button

Renders an action control with compact rhythm, icon spacing, and theme-aware variants.
Live example
import { ArrowRight } from "lucide-react";
import { Button } from "@hyzrui/core";
 
export function Example() {
  return (
    <Button>
      Button
      <ArrowRight size={15} />
    </Button>
  );
}

Installation

Install the primitive source, then keep editing it inside your app. The command names the component file you want copied.

Command
pnpm dlx hyzrui add button

Usage

Import the component from the generated source folder and compose it with normal React props.

Import
import { Button } from "@hyzrui/core";
Usage
<Button variant="outline">Button</Button>

Customization

Every primitive accepts local props and class names, then inherits design tokens from HyzrThemeProvider . Copy the file, keep the markup, and tune the CSS until it matches your product.

Radius--hui-radiusControls the default corner system for buttons, inputs, cards, overlays, and nested surfaces.
Foreground--hui-foregroundControls the page and component text colors. Dark mode uses the same component source with different tokens.
Surface--hui-surfaceControls card, dialog, popover, and input surfaces.
Border--hui-borderControls separators, input strokes, card outlines, and menu edges.
Primary--hui-primaryControls the main action color and the matching foreground color for solid controls.
Font--hui-font-familyControls the font stack used by every primitive inside the provider.
Control size--hui-control-font-sizeControls the default font size for buttons, inputs, selects, tabs, command rows, and menu triggers.
Control weight--hui-font-weight-controlControls the default weight of buttons, tabs, menus, badges, and compact actions.
Control height--hui-control-heightControls the default field and trigger height across forms and navigation.
Button height--hui-button-heightControls button height independently from form fields.
Button padding--hui-button-paddingControls horizontal button spacing without changing the text size.
Card padding--hui-card-paddingControls card, dialog, sheet, drawer, and panel interior spacing.
Border width--hui-border-widthControls default edge width for controls, cards, tables, and floating panels.
Focus width--hui-focus-widthControls keyboard focus outline thickness.
Motion duration--hui-transition-durationControls shared hover timing for controls and surfaces.
Hover lift--hui-hover-liftControls subtle hover lift for raised styles.
Overlay--hui-overlayControls dialog, sheet, drawer, and command overlay strength.
Floating offset--hui-floating-offsetControls menu, command, popover, and hover-card distance from the trigger.
Source fileEdit src/lib/hyzrui/components/button.tsx directly once the primitive is installed in your app.
Local classTarget .hui-button for local refinements that should not become global theme tokens.
Theme tokens
import { defineHyzrTheme } from "@hyzrui/core";
 
export const theme = defineHyzrTheme({
  id: "product",
  density: "comfortable",
  radius: 10,
  shadow: 0.08,
  colors: {
    background: "#fbfbfc",
    foreground: "#09090b",
    surface: "#ffffff",
    border: "#e4e4e7",
    primary: "#18181b",
    primaryForeground: "#ffffff",
  },
  typography: {
    controlSize: 14,
    controlWeight: 500,
    headingWeight: 680,
  },
  sizing: {
    controlHeight: 38,
    buttonHeight: 34,
    buttonPadding: 14,
    cardPadding: 18,
  },
  borders: {
    radius: 10,
    radiusSm: 7,
    radiusLg: 16,
    width: 1,
    focusWidth: 2,
  },
  motion: {
    duration: 150,
    hoverLift: 0,
    hoverMix: 5,
  },
});

See the customization guide for the full theme shape, style presets, scoped CSS overrides, and source-edit workflow.

Examples

These examples show the same primitive in realistic combinations and states.

Variants

Use variants to create visual hierarchy. Solid is the primary action; ghost and plain are for low-priority controls.

Variants
import { ArrowRight } from "lucide-react";
import { Button } from "@hyzrui/core";
 
export function ButtonVariants() {
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      <Button>
        Continue
        <ArrowRight size={15} />
      </Button>
      <Button variant="soft">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="plain">Plain</Button>
    </div>
  );
}

Sizes

Sizes stay compact and aligned so actions do not feel oversized.

Sizes
import { Button } from "@hyzrui/core";
 
export function ButtonSizes() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button size="xs">Tiny</Button>
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Tones

Tones keep semantic meaning without changing button height or layout rhythm.

Tones
import { Button } from "@hyzrui/core";
 
export function ButtonTones() {
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      <Button tone="neutral" variant="outline">Neutral</Button>
      <Button tone="accent" variant="outline">Accent</Button>
      <Button tone="success" variant="outline">Success</Button>
      <Button tone="warning" variant="outline">Warning</Button>
      <Button tone="danger" variant="outline">Delete</Button>
    </div>
  );
}

Icon buttons

Icon-only buttons use aria-label so screen readers announce the action.

Icon buttons
import { Copy, MoreHorizontal, Upload, Download, Trash2 } from "lucide-react";
import { IconButton, Toolbar } from "@hyzrui/core";
 
export function ButtonIcons() {
  return (
    <Toolbar>
      <IconButton label="Copy" variant="outline"><Copy size={16} /></IconButton>
      <IconButton label="Upload" variant="outline"><Upload size={16} /></IconButton>
      <IconButton label="Download" variant="outline"><Download size={16} /></IconButton>
      <IconButton label="Delete" tone="danger" variant="outline"><Trash2 size={16} /></IconButton>
      <IconButton label="More" variant="ghost"><MoreHorizontal size={16} /></IconButton>
    </Toolbar>
  );
}

Button group

Group a primary action with a disclosure trigger when the action has sub-options.

Button group
import { Button, ButtonGroup, IconButton } from "@hyzrui/core";
import { ChevronDown } from "lucide-react";
 
export function ButtonGroupExample() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <ButtonGroup>
        <Button variant="outline">Publish</Button>
        <IconButton label="Publish options" variant="outline">
          <ChevronDown size={15} />
        </IconButton>
      </ButtonGroup>
      <ButtonGroup>
        <Button>Deploy</Button>
        <IconButton label="Deploy options">
          <ChevronDown size={15} />
        </IconButton>
      </ButtonGroup>
    </div>
  );
}

Loading state

Combine disabled and a spinner to communicate async work in progress.

Loading state
import { Button, Spinner } from "@hyzrui/core";
 
export function ButtonStates() {
  return (
    <div style={{ display: "flex", gap: 8 }}>
      <Button disabled>
        <Spinner size="sm" />
        Saving…
      </Button>
      <Button disabled variant="outline">Unavailable</Button>
    </div>
  );
}

Fluid

fluid stretches the button to fill its container — useful for forms and mobile-first layouts.

Fluid
import { Button } from "@hyzrui/core";
 
export function ButtonFluid() {
  return (
    <div style={{ maxWidth: 320 }}>
      <Button fluid>Complete checkout</Button>
    </div>
  );
}

API Reference

Props are intentionally small. For deeper changes, edit the component source file directly.

PropTypeDefaultDescription
classNamestring-Adds classes to the copied component without replacing the default structure.
childrenReact.ReactNode-The rendered content for compound or wrapper components.
...propsHTMLAttributes-Forwards native element props such as id, aria attributes, and event handlers.
variantHyzrVariantsolidControls solid, outline, soft, ghost, or plain treatment.
sizeHyzrSizemdControls compact, default, large, and icon sizes.
shapeHyzrShapesquareControls rounded edge style without changing layout rhythm.
toneHyzrToneneutralControls semantic tone while preserving contrast.
fluidbooleanfalseStretches the button to the container width.
disabledbooleanfalseNative disabled behavior and muted styling.