Button

Variants

Four visual styles, one hierarchy rule: only one primary button per section. Everything else supports it.

Primary — variant="solid" intent="primary"

Secondary — variant="outline" intent="secondary"

Ghost — variant="ghost"

Danger — variant="solid" intent="danger"

Icons

Buttons accept a leading icon, a trailing icon, both, or neither. Icon-only buttons need an ariaLabel.

Leading icon

Trailing icon

Icon only

Disabled

Parts

.source-button Root interactive element
.source-button-label Text label inside the button
.source-button-icon Optional leading or trailing icon slot
.source-button-spinner Loading spinner when loading is true

States

StateAppearance

DefaultUses variant and palette defaults.

HoverBackground shifts to the configured hover token.

Focus2px focus-visible ring with palette focus color.

DisabledMuted opacity and not-allowed cursor.

LoadingSpinner shown, interaction blocked.

Design intent

A button answers the question "what can I do here?" without the user reading surrounding text. The variant communicates how important the action is — solid for the primary path, outline for secondary options, ghost for tertiary or contextual actions. Danger is reserved for destructive operations; never use it as an accent color.

Never have two solid buttons competing for attention in the same area. If a page section has multiple actions, one should be solid (or outline) and the rest should drop to ghost or link.

When to use

Use one dominant button and demote secondary actions with lower emphasis variants.

Prefer specific action text like "Save draft" or "Publish".

Use icons as support, not as the only way to understand the action.

Don't

Do not give equal visual weight to competing actions.

Avoid generic labels when the outcome could be ambiguous.

Never rely only on red color. Use explicit destructive wording.

Choosing the right variant

VariantIntentWhen to use

solidprimaryThe one action the user should take. One per section.

outlinesecondaryAlternative or cancel action alongside a primary.

ghostsecondaryLow-emphasis, contextual, or repeated inline actions.

subtlesecondaryToolbar or card actions where a border would add noise.

soliddangerDestructive confirmation (delete, remove, revoke). Pair with a cancel.

outlinedangerSofter destructive action, e.g. in a table row or list item.

Icon placement

PlacementWhen to use

LeadingWhen the icon reinforces the label (arrow for navigate, download for export).

TrailingWhen the icon signals direction or consequence (chevron for expand, external for open).

Icon onlyToolbars and compact UIs where context makes meaning clear. Always add ariaLabel.

BothRarely needed. Use only when both icons carry distinct meaning.

Button props

PropTypeDefaultDescription

childrenReactNodenullButton label content.

variantsolid | outline | ghost | subtlesolidVisual style.

intentprimary | secondary | dangerprimaryCommon intent shortcut for palette defaults.

sizesm | md | lgmdControl height and spacing.

leadingIconReactNodenullIcon rendered before the label.

trailingIconReactNodenullIcon rendered after the label.

ariaLabelstringnullRequired when the button has no visible label.

loadingbooleanfalseShows spinner and blocks clicks.

hrefstringnullRenders as anchor when provided.

externalbooleanfalseAdds safe external target and rel on links.

onClickMouseEventHandler<HTMLButtonElement>nullClick handler for button mode.

Basic usage

import { Button } from '@pierredelattre/source-react';

// Primary
<Button intent="primary">Save changes</Button>

// Secondary
<Button intent="secondary" variant="outline">Cancel</Button>

// Ghost
<Button intent="secondary" variant="ghost">Dismiss</Button>

// Danger
<Button intent="danger">Delete account</Button>

// Danger outline
<Button intent="danger" variant="outline">Remove</Button>

With icons

// Leading icon
<Button intent="primary" leadingIcon={<ArrowRightIcon />}>
  Continue
</Button>

// Trailing icon
<Button intent="secondary" variant="outline" trailingIcon={<DownloadIcon />}>
  Export
</Button>

// Icon only — ariaLabel required
<Button
  intent="secondary"
  variant="ghost"
  ariaLabel="Close dialog"
  leadingIcon={<Cross1Icon />}
/>

Loading state

<Button intent="primary" loading={isSubmitting}>
  Save changes
</Button>

As link

<Button
  href="https://github.com/pierredelattre/source-design-system"
  external
  variant="ghost"
  intent="secondary"
>
  Open repository
</Button>

Component tokens

TokenDefault

--source-button-bg--source-color-surface-raised

--source-button-color--source-color-text

--source-button-border-color--source-color-border-strong

--source-button-height2.25rem

--source-button-focus-color--source-color-accent