UI Primitive: Button

Live Primitive

This page is the code-bound reference for shared command buttons. It excludes clickable pills and navigation links, and captures the minimal size/width contract before a broader page sweep.

Live Variants

Each example shows the intended command-button contract without pulling in link or toolbar behavior.

Use when a command button sits beside an editable or non-editable text field and should share its row rhythm. Status or warning copy belongs immediately beside that command area, not in a distant shared message block.

Saved.

Size is defined by height and type size only.

Short labels such as OK and Cancel should still resolve to the same width.

Modal action-row layout belongs to the modal shell. The button contract stays shared.

Delete buttons should still use warning or confirmation prompts, but they do not need a different visual treatment by default.

State changes should not alter size or alignment in a button row.

Canonical Markup

Copy these snippets as the current shared baseline for command buttons. Navigation actions such as New Detail -> belong to a separate link pattern, and button feedback should stay local to the same command area.

Small Button Next To A Field

<div class="studioUiPrimitiveButtonDemo__fieldGroup">
  <div class="studioUiPrimitiveButtonDemo__fieldGrid">
    <input class="tagStudio__input" type="text" value="Shared field example">
    <button class="tagStudio__button tagStudio__button--defaultWidth" type="button">Save</button>
  </div>
  <div class="tagStudio__buttonFeedback studioUiPrimitiveButtonDemo__fieldFeedback">
    <p class="tagStudio__status" data-state="success">Saved.</p>
  </div>
</div>

Medium Command Button

<button class="tagStudio__button tagStudio__button--md tagStudio__button--defaultWidth" type="button">Save</button>

Default Width Pair

<div>
  <button class="tagStudio__button tagStudio__button--md tagStudio__button--defaultWidth" type="button">OK</button>
  <button class="tagStudio__button tagStudio__button--md tagStudio__button--defaultWidth" type="button">Cancel</button>
</div>

Modal Action Row

<div class="tagStudioModal__actions">
  <button class="tagStudio__button tagStudio__button--md tagStudio__button--defaultWidth" type="button">Cancel</button>
  <button class="tagStudio__button tagStudio__button--md tagStudio__button--defaultWidth tagStudio__button--defaultAction" type="button">OK</button>
</div>

Destructive Command

<button class="tagStudio__button tagStudio__button--defaultWidth" type="button">Delete</button>

Disabled

<button class="tagStudio__button tagStudio__button--defaultWidth" type="button" disabled>Save</button>

Notes

Implementation points only.

Primitive Scope

tagStudio__button currently defines the shared command-button baseline for Studio actions such as Save, Open, Import, New, OK, and Cancel.
Buttons are commands, not links. If an element behaves as navigation, treat it as a link pattern rather than styling it as a button.
Clickable pills such as tag chips are out of scope for this primitive and should be defined separately.
Buttons do not need to live inside a toolbar. Toolbar remains an optional composition primitive to define later.

Current Baseline

The shared implementation is a neutral bordered button with stable radius, inline-flex centering, and no special destructive styling.
The primitive now defines two sizes only: small and medium.
The primary use case for the small size is a command button placed next to a text field in the same row.
Button-related status, warning, and success messages should stay adjacent to the related command area, either on the same row or in a dedicated row immediately below it.
The shared contract also defines a standard default width, but existing live Studio pages still need a later sweep to adopt it consistently.
Disabled buttons keep the same geometry and currently communicate state mainly through muted text and the disabled cursor.

Modal buttons are in scope for this primitive. The action-row layout belongs to the modal shell, but the button geometry and styling should stay shared.
The default modal action should be explicit through bold text.
OK, Cancel, and similar modal actions should not introduce modal-only button shapes.

Drift To Resolve

Some current Studio pages still use anchor-styled buttons for navigation actions such as creating a new related record. Those should move to a link pattern rather than staying inside the button primitive.
Current live pages also contain labels such as Save Tags that should likely be shortened to Save in a later consistency sweep.
The first pass of this primitive should capture the role boundary and size/width contract before wider page adoption.

Design Guidance

Keep button copy short enough that the shared default width remains viable. Session is a reasonable practical width reference for the current contract.
If a button genuinely needs to be wider, override only that button rather than widening adjacent buttons to match it.
Buttons should contain either text or an icon, not both.
If buttons need grouping or a boundary, do not use a panel as the grouping device.
Destructive actions should continue to use warning or confirmation prompts, but they do not need a special button style by default.

Feedback Placement

If a button needs status, warning, or result copy, place that copy directly beside the related button row or immediately below it.
Do not route button feedback into a distant shared message area when the button is associated with a specific field or local command group.
On a row that already needs space for another control such as save mode, prefer a dedicated feedback row below the buttons rather than forcing the message into the same line.