Diwa Design System

Components Introduction

Every component page follows the same tab structure so you can move from exploration to implementation quickly. Start with Configurator, then use Usage and Accessibility to validate behavior before shipping.

How to Use the Docs Tabs

Configurator

Try variants, sizes, and states quickly before implementation.

Examples

See realistic combinations and reference layouts.

Usage

Learn decision rules, patterns, and integration guidance.

Accessibility

Check keyboard behavior, ARIA usage, and focus expectations.

API

Reference props, attributes, events, and defaults.

Onboarding Picks

These pages are the fastest path for a new contributor to learn Diwa patterns across actions, forms, overlays, and feedback.

ButtonInput TextSelectCheckboxModalToast

Component Families

Connect With Other Docs Areas

Developing Introduction

Pick a framework path and verify setup/event handling.

Designing Introduction

Map component decisions to token and state design rules.

News and Releases

Follow changelog, roadmap, and migration updates.

Complete Catalog (A-Z)

AccordionBadgeButtonButton PureCheckboxDividerFlyoutIconInline NotificationInput DateInput EmailInput MonthInput NumberInput PasswordInput SearchInput TelInput TextInput TimeInput UrlInput WeekLinkLink PureModalMulti SelectPaginationPin CodePopoverRadio GroupScrollerSegmented ControlSelectSpinnerStepper HorizontalSwitchTableTabsTabs BarTagTextText ListTextareaToast