WelkUI!REACT EDITION

Component field guide

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

LIVE COMPONENT

WelkDialog

A controlled native modal dialog with a comic surface and focus containment. The parent owns open and must close it in onClose. Escape requests dismissal; optional backdrop dismissal is off by default. Action callbacks let the application perform work before updating visibility.

Ready for adventure?

Choose your next chapter.

Usage

React / TSX
import { useState } from "react";
import { WelkButton, WelkDialog } from "@welkui/react";

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

<WelkButton onClick={() => setOpen(true)}>Open dialog</WelkButton>
<WelkDialog open={open} onClose={() => setOpen(false)}
  title="Ready for adventure?" type="confirmation">
  Choose your next chapter.
</WelkDialog>

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

Variants and behavior

  • alert (default), info, warning, error, success: semantic surfaces.
  • type=default: one action button.
  • type=confirmation: separate Yes and No buttons.

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.

alert

Open a alert modal to inspect its surface, action color, and focus behavior.

alert message

This is a real modal. Try Tab, Escape, the close button, or the backdrop.

Key propsvariant="alert" type="default"

info

Open a info modal to inspect its surface, action color, and focus behavior.

info message

This is a real modal. Try Tab, Escape, the close button, or the backdrop.

Key propsvariant="info" type="default"

warning

Open a warning modal to inspect its surface, action color, and focus behavior.

warning message

This is a real modal. Try Tab, Escape, the close button, or the backdrop.

Key propsvariant="warning" type="default"

error

Open a error modal to inspect its surface, action color, and focus behavior.

error message

This is a real modal. Try Tab, Escape, the close button, or the backdrop.

Key propsvariant="error" type="default"

success

Open a success modal to inspect its surface, action color, and focus behavior.

success message

This is a real modal. Try Tab, Escape, the close button, or the backdrop.

Key propsvariant="success" type="default"

Confirmation

Two actions with independent callbacks. The result is displayed after the modal closes.

Accept this mission?

This is a real modal. Try Tab, Escape, the close button, or the backdrop.

Key propstype="confirmation" onYesPress={...} onNoPress={...}

Usage notes and accessibility

  • Use a modal for a focused decision that needs to interrupt the current task. Keep content concise and provide an obvious dismissal or next action.
  • The parent owns open. onClose synchronizes state after native dismissal. Default footer actions close the dialog; supplying onPress, onYesPress or onNoPress replaces that action's default closing behavior.
  • The native dialog handles focus containment and Escape. Test the initial focus and return focus in the full application. Do not open several modal examples at once.
  • closeOnTapOutside is opt-in. Avoid accidental backdrop dismissal for destructive decisions or forms with unsaved data.

Props

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

WelkDialog prop reference
PropTypeDefaultDescription
openbooleanRequiredControlled visibility. Set false when dismissal is requested.
onClose() => voidRequiredDismissal callback; the parent must update open.
titleReactNodeRequiredVisible title and accessible dialog name.
childrenReactNodeUnsetPanel content.
closeOnTapOutsidebooleanfalseAllows dismissal by pressing and releasing on the backdrop.
classNamestringUnsetAdditional CSS class on the component root.
variant"alert" | "info" | "warning" | "error" | "success""alert"Dialog color treatment.
type"default" | "confirmation""default"Single-action or two-action footer.
closeLabelstring"Close dialog"Accessible name for the close button.
buttonTextstring"Okay"Default-mode action label.
onPressMouseEventHandler<HTMLButtonElement>Closes dialogDefault-mode action callback. When supplied, it replaces automatic action-button dismissal.
yesTextstring"Yes"Confirmation positive-action label.
noTextstring"No"Confirmation negative-action label.
onYesPressMouseEventHandler<HTMLButtonElement>Closes dialogConfirmation positive-action callback. When supplied, manage dismissal yourself.
onNoPressMouseEventHandler<HTMLButtonElement>Closes dialogConfirmation negative-action callback. When supplied, manage dismissal yourself.

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.