Button

Every variant has a clear hover fill, including Ghost (a light grey).

Examples

Sizes

Text buttons follow the Base System size ramp: default (md, 40px), lg (48px), and sm (28px).

Icon Buttons

Icon Buttons use icon (44px) or icon-sm (32px), always with an aria-label. The secondary and outline variants are the designed pair.

Loading

loading shows a spinner after a short delay and disables the control. inline (default) keeps the label; replace hides it and centres the spinner.

Playground

<Button>Button</Button>

Usage

import { Button } from "@sophic/portal-ui/components/ui/button";

<Button variant="outline">Button</Button>

Props

Button also accepts every native <button> attribute.

Tokens

Button reads --button-* and --icon-button-* from the Base System (with fallbacks so apps without those tokens keep the previous look).

Changelog

• 5 October 2026 — Secondary fill is solid; the grey wash no longer lets content show through. Full notes
• 4 October 2026 — Dark primary fill is --neutral-900; hover is --white-fixed. Full notes
• 3 October 2026 — Outline border shares --control-border with fields (Soil wash, not opaque neutral-300). Full notes
• 3 October 2026 — md is 40px and lg is 48px; height is line-box plus padding on the spacing scale. Full notes
• 30 September 2026 — Leading and tracking match the three Figma sizes. Full notes
• 29 September 2026 — size="lg" is a pill (--button-radius). Full notes
• 24 September 2026 — Secondary is a 6% text wash. Ghost hover is the shared 4% hover. Full notes
• 11 September 2026 — Loading uses the looping brand mark on this site. Full notes
• 14 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 10 August 2026 — Outline hover uses Neutral 300 (--button-outline-hover). Full notes
• 22 July 2026 — Ghost hover uses Neutral 200 (--button-ghost-hover). Full notes
• 17 July 2026 — Size ramp lg / default (md) / sm (44 / 36 / 28px). Full notes
• 17 July 2026 — Fills match Figma light and dark example rows. Full notes
• 15 July 2026 — Icon buttons circular with icon / icon-sm ramp. Full notes
• 14 July 2026 — Base System pills, hover shades, solid danger variant. Full notes