Buttons & actions

Every way a Buildpad screen asks the user to act. A Button with no color is the ink CTA — the one primary action per view — while color="primary" is the ember brand CTA, reserved for brand moments. Everything else steps down through default, light, subtle and transparent.

Variants

From the ink CTA down to text-only; hover each one to see its state.

Ink CTA — defaultNo color, filled: the primary action on every screen. Renders --ds-cta-bg, inverts in dark mode.

Brand CTA — color="primary"Ember fill for brand moments: onboarding, upgrade, a hero CTA. Use at most once per view.

variant="light"Tinted secondary action. Text is promoted to the AA 700 stop.

variant="outline"Bordered secondary action on busy surfaces.

variant="default"Neutral surface button: Cancel, Save draft, filters. The workhorse secondary.

variant="subtle"No fill until hover. Tertiary actions inside cards and tables.

Invite your team

Approvals move faster with more reviewers.

variant="white" on an ink surfaceFor dark brand bands only — shown on --ds-brand-hero, which never inverts.

variant="transparent"Text-only, no hover fill. Inline actions next to body copy.

Colours

The brand and semantic scales across the three variants that carry colour.

primarygrayredgreenblueyellowfilledlightoutline

Colour × variantred, green, blue, yellow resolve to danger, success, info and warning; gray is the neutral scale.

Sizes

Five regular sizes and five compact ones for dense UIs.

size — xs to xlHeight and padding scale; the theme pins the label to md type, so long labels stay readable at xs.

size — compact-xs to compact-xlTighter padding for dense toolbars and table rows. md is the default.

Icons and sections

leftSection and rightSection take any node; Tabler icons at 16px fit every size from sm up.

leftSectionA leading icon names the action. Tabler icons at 16px.

rightSectionA trailing icon signals what happens next: navigation or a menu.

fullWidth + justify="space-between"With both sections, justify pins the icons to the edges.

States

Loading, disabled (with and without an explained reason) and full width.

loadingKeeps its width and blocks clicks while a request is in flight. loaderProps picks the loader.

disabledEvery variant fades to the same neutral disabled surface.

data-disabled + TooltipUse data-disabled (not disabled) when the reason must be shown on hover.

fullWidthFills its container: sign-in forms, drawers, mobile sheets.

Button groups

Button.Group joins buttons into one control: segmented choices, split buttons and steppers.

Button.GroupJoined buttons share borders; only the outer corners keep the pill radius.

Split buttonPrimary action plus an icon-only button for the alternatives.

Button.GroupSectionA non-interactive segment inside a group, e.g. a quantity stepper.

orientation="vertical"Stacked group for narrow side panels. Vertical groups drop the pill — radius="md" keeps the stacked corners even.

ActionIcon

Icon-only buttons for toolbars, table rows and headers. They follow the ember primaryColor unless given a color.

filled

light

outline

default

subtle

transparent

gray

red light

variantIcon-only buttons default to primaryColor (ember). Always pass aria-label.

size — xs to xlPair the icon size with the control: 14 / 16 / 18 / 20 / 24px.

loading · disabledSame state model as Button.

ActionIcon.GroupJoined icon buttons for formatting toolbars.

2 / 12

ActionIcon.GroupSectionA label segment between icon buttons: pagination.

CloseButton

The standard dismiss control for panels, modals, drawers and removable filters.

size — xs to xlShips with an accessible name; override it with aria-label.

Status: Pending

Owner: Daniel

Order filters

In contextDismissing an applied filter and closing a side panel.

CopyButton

A render-prop helper around the clipboard; pair it with a Tooltip or a label swap for feedback.

Webhook URL

CopyButton + ActionIcon + TooltipClick the icon: the tooltip flips to Copied and the icon to a check for 2s.

Webhook URL

Copied stateFrozen preview: Tooltip opened, success colour on the icon.

CopyButton + ButtonLabel and colour swap confirm the copy without a tooltip. Right: the copied state, frozen.

How the pieces combine at the top of a record page.

Purchase orders / PO-2039

Brightline Electrical

Draft

$3,150 · due 12 Nov

Record toolbarOne ink CTA, a default secondary, everything else behind an overflow Menu.

Overflow menu — openStatic preview (opened, withinPortal=false). Destructive items go last, after a divider, in red.

Destructive actions

Deleting is always confirmed, and the confirming button names what is deleted.

Delete PO-2039?

This removes 3 line items and cannot be undone.

Inline confirm rowdefault Cancel left of a filled red action that names exactly what it deletes.

Confirm modalThe trigger is a quiet light red; the filled red lives only inside the confirmation.