QQuiet Slate

Button

The primary action control. Use variant for style and size for scale — never boolean flags.

Variants
Sizes
States
<Button variant="primary" size="md">
  Save changes
</Button>

<Button variant="destructive">Delete project</Button>

Input

Single-line text entry. Pair with a Label whose htmlFor matches the input id.

Please enter a valid email address.

<Input id="email" type="email" placeholder="you@studio.com" />

Textarea

Multi-line text entry. Honors rows; grows with content when autoresize is handled by the parent.

<Textarea id="brief" rows={4} placeholder="Describe what you're building…" />

Select

A native select styled to match the system — the accessible default for short option sets.

<Select id="tz" defaultValue="utc">
  <option value="utc">UTC</option>
  <option value="saopaulo">São Paulo</option>
</Select>

Checkbox

A binary toggle. Always give it an accessible name via a paired Label or aria-label.

<Checkbox id="updates" defaultChecked />
<Label htmlFor="updates">Send me product updates</Label>

Label

A caption bound to a control via htmlFor. Clicking the label focuses the control.

<Label htmlFor="team">Team name</Label>
<Input id="team" />