YolkUI playground

Design tokens. Components will appear here as they are built.

Button

default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link

Pill

default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link

Icon spacing

xs · 28
sm · 32
default · 36
lg · 40

States

Link, not a button

Button Group

Composition

Separator and text

1–10 of 240

Orientation and size

In context · soft

Variants

default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link

Input

Sizes · same heights as Button

sm
default
lg

States · hover and click the first one

Field

We only use it to send receipts.

Enter a full address, like ada@yolkui.com.

Icons and add-ons

kg

Web form fields

https://
http://
$
$USD

We won’t spam you, we promise :)

We won’t spam you, we promise :)

That’s not a valid email address
⌘K

Textarea

Badge

neutralDraftDraftDraft
brandBetaBetaBeta
accentNewNewNew
successPaidPaidPaid
infoSyncingSyncingSyncing
warningExpiringExpiringExpiring
destructiveFailedFailedFailed

Sizes, shape and count

PaidPaidPaidPaidPaid31299+2

Colors

primaryAa text
secondaryAa text
mutedAa text
accentAa text
accent-primaryAa text
brandAa text
destructiveAa text
successAa text
warningAa text
infoAa text
cardAa text
popoverAa text

Surfaces

background / border
input border

Radius

rounded-sm
rounded-md
rounded-lg
rounded-xl