Skip to content
OpenWaggle
Applies to @openwaggle/extension-react@0.1.x

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 associates a label, optional description, control, and error. Inputs forward their native React props, so browser validation and accessible attributes remain available.

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 complete props and exported types.