Welkdefault
A non-interactive default status label.
default
Key props
variant="default"Component field guide
Explore live variants, compare states, and learn every prop. Pick a component to start.
WelkBadge
A non-interactive inline label for statuses, categories, and counts. It does not announce changes automatically and has no button behavior; add appropriate semantics in the consuming application when needed.
defaultinfosuccesswarningerror
Usage
import { WelkBadge } from "@welkui/react";
<WelkBadge variant="success">Ready!</WelkBadge>Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.
Variants and behavior
- default: neutral paper surface.
- info: informational blue.
- success: positive green.
- warning: caution yellow.
- error: error red.
- 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.
info
A non-interactive info status label.
info
Key props
variant="info"success
A non-interactive success status label.
success
Key props
variant="success"warning
A non-interactive warning status label.
warning
Key props
variant="warning"error
A non-interactive error status label.
error
Key props
variant="error"Size sm
Badge size changes padding and typography.
New chapter
Key props
size="sm"Size md
Badge size changes padding and typography.
New chapter
Key props
size="md"Size lg
Badge size changes padding and typography.
New chapter
Key props
size="lg"Usage notes and accessibility
- Use badges for short statuses and counts rather than long sentences. Pair semantic colors with text so the meaning does not depend on color alone.
- Badges are spans, not buttons or live notifications. Use WelkButton for actions and WelkSnackBar for transient announcements.
- If a changing count needs an announcement, add an appropriate aria-live region in the surrounding application. Avoid announcing decorative or frequently changing numbers unnecessarily.
Props
Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Unset | Badge label or count. |
variant | "default" | "info" | "success" | "warning" | "error" | "default" | Semantic color treatment. |
size | "sm" | "md" | "lg" | "md" | Small, medium, or large presentation. |
Native props and refs
Inherits native span attributes, including className, style, aria-* and data-*; forwards a span ref.
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.