Actions

Button.Link

View in Figma

An inline text-link button with optional leading and trailing icon slots. No background or border. Renders in the accent content color across two sizes (md, sm) and three interaction states (default, pressed, disabled).

Overview

An inline text-link button with optional leading and trailing icon slots. No background or border. Renders in the accent content color across two sizes (md, sm) and three interaction states (default, pressed, disabled).

Variant
Md

The md variant.

Variants and states

defaultpresseddisabled
md
sm

Anatomy

ButtonLink
  1. 1IconLeading  optional  instance swap
  2. 2Container.Label
  3. 3Label  required
  4. 4IconTrailing  optional  instance swap

Measurements

Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Specs
Label and icon, all states
colorContentAccent
#4B56C7
Corner radius
radiusPill
Pill
Icon-to-label gap (md) and label container inset (sm)
spacingGapPositive2xs
2pt
Label typography, md size
body.md.semibold
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 600 · typographyFontWeightSemiboldTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Label typography, sm size
label.md.semibold
Size 12px · typographyFontSizeLabelMdLine height 16px · typographyLineHeightLabelMdWeight 600 · typographyFontWeightSemiboldTracking 0px · typographyTrackingLabelMdParagraph spacing 0px · typographyParagraphSpacingLabelMdFamily SF Pro Text · typographyFontFamilyText
Opacity, disabled state
literal value
32%

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
sizevariantmd, sm
statevariantdefault, pressed, disabled
labelTexttextButton label
hasIconLeadingbooleanTrue
hasIconTrailingbooleanTrue

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.