Skip to content
OpenWaggle
Applies to @openwaggle/[email protected]

Extension React component catalogue

Visual reference for every @openwaggle/extension-react 0.1 primitive, variant, tone, and form state.

This catalogue renders the same class names, attributes, and stylesheet shipped by @openwaggle/extension-react. The examples are interactive HTML equivalents of the React primitives so you can inspect focus, disabled, validation, and control states directly.

import '@openwaggle/extension-react/styles.css'
import { Button, Field, Input, Panel, Stack } from '@openwaggle/extension-react'

Composed settings surface

Issue tracker

A realistic settings surface composed from Panel, Stack, Field, Input, Select, Checkbox, Badge, Alert, and Button.

Connected
Owner and repository name used for issue queries.
Configuration is stored through the brokered project settings capability.

Button

Button forwards native button props and supports primary, secondary, and ghost variants. Use a real button type and preserve disabled semantics.

Badge and Alert tones

Badge provides compact metadata. Alert provides status, note, or urgent feedback. Both support neutral, accent, success, warning, danger, and info tones.

Neutral Accent Success Warning Danger Info
No extension status has been reported yet.
This extension can add a project-specific view.
The extension settings were saved.
The next refresh may use cached data.
The extension will refresh when the active project changes.

Input, Textarea, Select, Checkbox, and Field

Field groups a label, optional description, control, and error. Set its htmlFor to the control’s id to connect the label. It does not assign IDs or connect descriptions and errors automatically. Add aria-describedby and aria-invalid to the control when needed, and give the referenced description or error element an ID. Inputs forward native React props.

Comma-separated GitHub labels.
Choose a project before saving.

Stack and Panel

Stack owns vertical spacing and accepts any CSS gap. Panel creates the bounded host-aligned surface. Use them together for extension-owned composition rather than importing private OpenWaggle renderer layouts.

See the API reference for the exported components and prop type names.