WinButton

A classic Win2k raised button with bevel borders. Supports disabled, active, and pressed states.

When to use

Use WinButton for any action trigger — Submit, Cancel, OK, Apply patterns. Works as a standard <button> replacement.

When not to use

Do not use WinButton for navigation links. Use WinCard or an <a> tag instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinButton } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default

Disabled

Active / pressed (toggle)

State: resting (raised)

With counter

Button row (Cancel, Apply, OK)

Props

All available props for the WinButton component.

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Button label.
`onClick`	`() => void`	`—`	Click handler.
`disabled`	`boolean`	`false`	Disables the button.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Button type attribute.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinButton } from 'win2k-ui'

export function Example() {
  return (
    <div className="flex gap-2">
      <WinButton onClick={() => alert('Cancel')}>Cancel</WinButton>
      <WinButton onClick={() => alert('Apply')}>Apply</WinButton>
      <WinButton onClick={() => alert('OK')}>OK</WinButton>
    </div>
  )
}

Notes

WinButton uses CSS `:active` pseudo-class to invert the bevel border from raised to sunken on click. The disabled state removes the bevel entirely and uses flat grey styling. Always set `type="button"` explicitly inside forms to prevent accidental submission.