Component field guide

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

LIVE COMPONENT

WelkSnackBar

A controlled, portaled notification with comic pop-in and exit animations and a polite status announcement. Update open in onClose. A positive autoHideDuration requests dismissal after that many milliseconds; hover or focus pauses it and leaving restarts the full duration. Motion respects reduced-motion preferences.

Usage

React / TSX

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

const [open, setOpen] = useState(false);

<WelkButton onClick={() => setOpen(true)}>Notify me</WelkButton>
<WelkSnackBar open={open} onClose={() => setOpen(false)}
  message="POW! Saved." position="bottom-middle" />

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.
Positions: top-left, top-middle, top-right, bottom-left, bottom-middle (default), bottom-right.

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.

default

Launch a default notification to compare its actual colors and comic animation.

Key propsvariant="default"

info

Launch a info notification to compare its actual colors and comic animation.

Key propsvariant="info"

success

Launch a success notification to compare its actual colors and comic animation.

Key propsvariant="success"

warning

Launch a warning notification to compare its actual colors and comic animation.

Key propsvariant="warning"

error

Launch a error notification to compare its actual colors and comic animation.

Key propsvariant="error"

top-left

Launch at the viewport's top-left anchor. Dismiss before comparing another position.

Key propsposition="top-left"

top-middle

Launch at the viewport's top-middle anchor. Dismiss before comparing another position.

Key propsposition="top-middle"

top-right

Launch at the viewport's top-right anchor. Dismiss before comparing another position.

Key propsposition="top-right"

bottom-left

Launch at the viewport's bottom-left anchor. Dismiss before comparing another position.

Key propsposition="bottom-left"

bottom-middle

Launch at the viewport's bottom-middle anchor. Dismiss before comparing another position.

Key propsposition="bottom-middle"

bottom-right

Launch at the viewport's bottom-right anchor. Dismiss before comparing another position.

Key propsposition="bottom-right"

Automatic dismissal

Closes after 4 seconds; hover or focus pauses the countdown, leaving restarts it.

Key propsautoHideDuration={4000}

Usage notes and accessibility

Use for brief, non-blocking feedback. Important errors or tasks requiring a decision should remain visible in the page or use a dialog.
open and onClose are controlled. A positive autoHideDuration is milliseconds; zero means manual dismissal. Hover or focus pauses the timer and leaving restarts its full duration.
There are six viewport anchors and five semantic colors. These examples launch real portaled notifications; close one before opening another to avoid overlap.
The status is announced politely. Keep messages concise, pair color with text, and avoid short auto-dismiss times for important content.

Props

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

WelkSnackBar prop reference
Prop	Type	Default	Description
`open`	`boolean`	Required	Controlled notification visibility.
`onClose`	`() => void`	Required	Dismissal request from the close button or timer; update open.
`message`	`ReactNode`	Required	Notification content.
`position`	`"top-left" \| "top-middle" \| "top-right" \| "bottom-left" \| "bottom-middle" \| "bottom-right"`	"bottom-middle"	Viewport anchor.
`variant`	`"default" \| "info" \| "success" \| "warning" \| "error"`	"default"	Notification color treatment.
`autoHideDuration`	`number`	0	Non-negative finite duration in milliseconds; 0 disables automatic dismissal.
`closeLabel`	`string`	"Dismiss notification"	Accessible name for the close button.
`className`	`string`	Unset	Additional CSS class on the component root.

This component supports the props listed above, not arbitrary native HTML attributes.

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.