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.
`className`	`string`	-	Adds custom classes to the button.
`children`	`ReactNode`	-	Button label content.

Examples

Basic buttons

import { Button } from '@murasaki/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/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>
  )
}

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.