Button

The Button component renders a Windows 98 styled push button with raised 3D borders.

Props

Prop	Type	Default	Description
`active`	`boolean`	`false`	Renders the button in a pressed state.
`disabled`	`boolean`	`false`	Disables button interaction.
`primary`	`boolean`	`false`	Applies the primary button emphasis.
`iconOnly`	`boolean`	`false`	Square variant for icon-only buttons: drops the 75px min-width, removes horizontal padding, and restores the real text color so `fill="currentColor"` SVG icons render.
`className`	`string`	-	Adds custom classes to the button.
`children`	`ReactNode`	-	Button label content.

Label text is painted with a transparent color + text-shadow trick for the embossed Win98 look. That makes fill="currentColor" SVG icons inherit a transparent color on the default (labeled) variant — use iconOnly for icon buttons, which restores --button-text and removes the shadow.

Examples

Basic buttons

import { Button } from '@murasaki-io/react98'
 
export function ButtonBasicDemo(): React.ReactElement {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
      <Button primary>Click Me</Button>
      <Button>Cancel</Button>
      <Button disabled>Disabled</Button>
    </div>
  )
}

Pressed state

import { Button } from '@murasaki-io/react98'
import { useState } from 'react'
 
export function ButtonStateDemo(): React.ReactElement {
  const [active, setActive] = useState(false)
 
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
      <Button active={active} onClick={() => setActive(value => !value)}>
        {active ? 'Pressed' : 'Press Me'}
      </Button>
      <Button active>Always Active</Button>
    </div>
  )
}

Icon-only buttons

import { Button } from '@murasaki-io/react98'
 
function PlayIcon(): React.ReactElement {
  return (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
      <path d="M4 3.5 12.5 8 4 12.5z" />
    </svg>
  )
}
 
export function ButtonIconDemo(): React.ReactElement {
  return (
    <div className="flex items-center gap-2">
      <Button iconOnly aria-label="Play">
        <PlayIcon />
      </Button>
      <Button iconOnly aria-label="Play (large)" className="size-6">
        <PlayIcon />
      </Button>
    </div>
  )
}

ARIA

Button renders a native button element and preserves the browser’s default button semantics.

Keyboard

Key	Behavior
`Enter`	Activates the button.
`Space`	Activates the button.

SSR

Button is a client component through the package root. Its initial markup is stable when active, disabled, and label content are stable between server and client.