Playground

Button

control

Action button — 12px label chip with contextual surface

CTAs, form submissions, in-card actions

import { Button } from "@everydayos/ui";

Usage

The button is always one perceptual step warmer/darker than its host. Don't pick by taste — pick by host surface.

Variants

Sizes

With icons

API

variant

Default: default

secondarymuteddefaultglassghostoutline

defaultpreferredrare

size

Default: default

smdefaultlgicon

defaultpreferredrare

radius

Default: sm

xssm

defaultpreferredrare

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`unknown`	—

Examples

Glass on dark & imagery

Use glass on dark/charcoal surfaces, glass-dark on bright imagery.

Ready to start?

Muted on grey cards (radius auto)

variant="muted" always gets 1px corners — no need to set radius. Use on warm-gray-1 / Surface tone="muted".

<Surface tone="muted" radius="sm" padding="md">
  <Inline spacing="sm" align="center">
    <Text variant="muted" size="s">Newsletter</Text>
    <Button variant="muted" size="sm" radius="xs">Subscribe</Button>
  </Inline>
</Surface>

Product UI — ghost & outline

Reserved for product UI (console tables, settings rows). Avoid in marketing surfaces.

<Inline spacing="sm">
  <Button variant="ghost" size="sm">Edit</Button>
  <Button variant="outline" size="sm">Cancel</Button>
</Inline>

Composition

Pairs well with

Stack

Inline

Surface

Input

When to avoid

Need a text link — use Link (or Button variant="ghost" for product UI)
Too many buttons on a page — prioritize one primary action
Need a colored/status pill — use Badge