Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkButton

A native action button with uneven comic borders, a hard shadow, and hover/press feedback. Use a semantic color for the action's intent and a size matching its context. Set type=submit explicitly for form submission.

Usage

React / TSX

import { useState } from "react";
import { WelkButton } from "@welkui/react";

const [count, setCount] = useState(0);

<WelkButton onClick={() => setCount(count + 1)}>
  Clicked {count} times
</WelkButton>

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

primary: highlighted main action (default).
secondary: supporting action.
ghost: subtle action.
info / success / warning / error: semantic action colors.
Sizes: sm, md (default), lg.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

primary

The primary color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="primary"

secondary

The secondary color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="secondary"

ghost

The ghost color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="ghost"

info

The info color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="info"

success

The success color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="success"

warning

The warning color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="warning"

error

The error color treatment. Hover, focus, and press to compare the feedback.

Key propsvariant="error"

Size sm

Compare the same action at a different size.

Key propssize="sm"

Size md

Compare the same action at a different size.

Key propssize="md"

Size lg

Compare the same action at a different size.

Key propssize="lg"

Disabled

Unavailable actions cannot be activated.

Key propsdisabled

Usage notes and accessibility

Use one primary action per local decision and use secondary or ghost for supporting choices. Always include text that describes the result of activation.
The default type is button. Set type=submit when submitting a form and type=reset only when clearing it is intentional.
Native buttons support Tab, Enter and Space. disabled prevents activation; also prevent duplicate asynchronous work in application state where needed.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkButton prop reference
Prop	Type	Default	Description
`children`	`ReactNode`	Unset	Button label and optional inline content.
`variant`	`"primary" \| "secondary" \| "ghost" \| "info" \| "success" \| "warning" \| "error"`	"primary"	Action color and surface treatment.
`size`	`"sm" \| "md" \| "lg"`	"md"	Small, medium, or large presentation.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	Unset	Action callback.
`disabled`	`boolean`	false	Disables interaction and active styling.

Native props and refs

Inherits native button props, including children (except where replaced by named content props), onClick, disabled, type, name, value, className, style, aria-* and data-*; forwards a button ref. The default type is button, not submit.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.