Everyday

Playground

Button

ui
control

Primary action button with variants and sizes

CTAs, form submissions, navigation actions

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

Usage

Buttons use opacity/glass styling. Solid colors are avoided except for primary CTAs. Use muted inside white containers (forms, footers) where secondary (opacity) would be invisible.

Variants

Sizes

With icons

API

variant
Default: default
defaultsecondarymutedghostoutlinelinkglass
defaultpreferredrare
size
Default: default
smdefaultlgxlicon
defaultpreferredrare
PropTypeDefault
asChildbooleanfalse
classNameunknown—

Examples

Glass on Dark & Image

Use glass for dark backgrounds, glass-dark for light/bright image backgrounds

Ready to start?

Lifestyle

Pill (opt-in)

Pill shape is opt-in via rounded-full or rounded-pill

<Inline spacing="sm">
  <Button className="rounded-full">Pill default</Button>
  <Button variant="secondary" className="rounded-pill">Pill secondary</Button>
</Inline>

Composition

Pairs well with

Stack
Inline
Surface

When to avoid

  • Need text link — use Link or Button variant="link"
  • Too many buttons — prioritize one primary action
  • Need a colored/status button — use Badge with bg-{color}. Solid colored button variants were removed on 2026-04.