UI Primitives

Six variants from default to link at four heights, each with a square size for a lone glyph, and padding that tightens on the side an icon sits.

A button that is only a glyph, and the tooltip that names it — required, so a row of unnamed buttons cannot happen by forgetting.

A value or a range on a track that carries its own name and reading, with a handle that comes forward on hover and a fill that eases to a click or a key but follows a drag exactly.

A setting that takes effect at once, filled in the live accent while on, with the track and thumb both reading Base UI's checked state.

A button that stays pressed, ghost or outlined at the kit's heights, answering to aria-pressed.

Toggles on the toolbar's pill that the arrows walk, holding one value or several.

A glass panel over a dimmed page for the decisions that should stop everything else, centred in a viewport that scrolls when the panel is tall.

Rows, groups and submenus on one popup surface, with the checkbox and radio rows holding their own state.

A glass panel of free content — a short form, a note — hanging off whatever opened it, titled for screen readers and capped to the room left on screen.

One value picked from a list and held on the trigger: the input's field over the menu's popup and rows, opening with the chosen row level with the value.

The dialog's panel for a choice that must be made: no close button and no dismissing by clicking away, only the answers it offers.

The menu's popup, rows and submenus, opened at the pointer by a right-click or a long press.

A glass sheet that slides in from any edge and swipes back out, its side read from the direction it dismisses in.

The popover's glass panel shown on hovering a link, to say where it goes before it is followed.

Notices that stack in a corner and fan out on hover, swipe away, and can be pinned to the control that caused them.

A short name in ink for a control that only shows a glyph, with its shortcut beside it and an optional arrow.

A pill of tabs over the panel they switch, laid out by whatever holds them rather than by the root.

Questions that open in place under a rule each, the panel easing to its measured height and the chevron turning with it.

One panel that opens and closes under the control that owns it, easing to its measured height.

A row of menus on the toolbar's pill, where the arrows move between them once one is open.

Site links on a pill whose panels open in one glass popup that resizes and slides between them.

A text field at the button's four heights, filled or outlined, that a Field labels, describes and marks invalid without being told.

The input's surface on a field that grows with what is typed, between a floor and a ceiling — the composer, a note, feedback.

A text field that suggests as you type and lets you keep what you typed, on the input's surface over the menu's rows.

A choice that waits for a Save, filled in ink when on and drawing a dash when only some of what it stands for is chosen.

Checkboxes that share one array of values, with a parent box that checks them all and shows a dash when some are on.

A value picked by typing to filter a list, one or many, with chosen values held as chips in the field.

A label, a control, a description and the errors that replace it, wired together so each names and describes the others.

Related fields under one legend, disabled together when the set is.

A form that hands errors from the server back to the fields they belong to and moves focus to the first one.

A number with steppers either side, at the input's heights, whose label can be dragged to scrub the value.

A one-time code in a row of single-character slots that moves along as you type and fills from a paste.

One choice from a few that are all worth reading, filled in ink with a dot for the one chosen.

A status, a count or a version in the kit's colour roles, at the Kbd's height so the two line up in a row of meta.

A picture of someone at the button's heights, with initials standing in until it loads or when it can't.

A reading inside a known range, like storage or quota, with its label and value on one line over the track.

How far a task has got, with its label and value over the track, turning to the live accent when done and pulsing when it can't say.

A scroller whose thin bars appear while it is hovered or moving, with an optional fade on the edges there is more past.

A 1px rule that turns with its orientation and is announced as a separator.

The language and file marks — JS, TS, TSX, CSS, Python, Go, Rust, Bash, JSON, Markdown, SVG, ICO, gitignore, env and PDF — each drawn in its own colours and sized by the class on it.

The Google product marks — Search, Gmail, Drive, Docs, Sheets, Slides and Calendar — each drawn in its own colours and sized by the class on it.

The model marks — Claude, OpenAI, Gemini, Grok, DeepSeek, Mistral and v0 — each drawn in its own colours and sized by the class on it.

The color-space marks — hex, RGB, HSL, OKLCH, OKLab, CMYK, P3, a swatch and Tailwind — each drawn in its own colours and sized by the class on it.