Component field guide

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

LIVE COMPONENT

WelkIconButton

A compact native button for an icon action. Always provide a descriptive label. The default exposes it as an accessible name; the text variant also displays the label beside the icon.

0 items added

Usage

React / TSX

import { WelkIconButton } from "@welkui/react";

<WelkIconButton label="Add item" icon={<span>+</span>}
  onClick={() => console.log("Added")} />

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

Variants and behavior

default: icon only, accessible label (default).
text: icon with visible text.

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.

Icon only

The label is accessible even though only the icon is visible. Activate to increment the count.

0 panels added

Key propsvariant="default" label="Add a panel"

Icon and text

The same label is displayed next to the icon.

0 panels added

Key propsvariant="text"

Disabled

Unavailable icon actions do not respond to activation.

0 panels added

Key propsdisabled

Usage notes and accessibility

label must describe the action, not the icon's shape: use Add item rather than Plus. Icon-only mode uses that label as its accessible name.
Use the text variant when an icon alone may be ambiguous. The icon wrapper is decorative, so avoid embedding an additional accessible label inside it.
This is a native button with type=button by default. Use disabled for unavailable actions and handle application work in onClick.

Props

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

WelkIconButton prop reference
Prop	Type	Default	Description
`icon`	`ReactNode`	Required	Icon content; its wrapper is hidden from assistive technology.
`label`	`string`	Required	Accessible action name, also visible in text mode.
`variant`	`"default" \| "text"`	"default"	Whether to display the text label.

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.