Better experiences.
Stronger teams.

Stage 1 of 4 · Design intent

Figma

Button

Radius 8 · padding 8 × 16

One icon, leading or trailing

Button

Figma Reference

Core Components, Button. Primary inverse, and the Virgin Media secondary inverse outline.

Description

Buttons provide clear, intentional actions. Hierarchy shows the importance of the action.

Implementation Guidance

Accessibility

Use inverse on a coloured surface when more contrast is required.

Semantic Structure

The control is a button. Its label names the action.

Content & SEO

Use a strong verb, sentence case, and a concise label.

Behaviour

Use a leading or a trailing icon, not both.

Accessibility References

Focus must meet WCAG.

Acceptance Criteria

Inverse and outline match the documented Button, with one icon at a time.

const theme = {
  o2: { fill: "#ffffff",
        text: "#0050ff",
        radius: 8 },
  vm: { fill: "transparent",
        text: "#ffffff",
        radius: 9999 },
} as const;

// Use a leading or a trailing icon, not both.
{iconLeft ?
  <Icon name="plus" />
) : null}
{children}
{iconRight ?
  <Icon name="chevron" />
) : null}

ButtonButton

Reviewed against Figma

Button

Primary inverse · radius 8

Animated explanation of one Button, in four stages. Stage 1, Design intent: a Figma schematic with an outline, the label Button, an icon slot, radius 8 and padding 8 by 16. One icon, leading or trailing. Stage 2, Specify: a Jira specification with Figma Reference, Description, Implementation Guidance, Accessibility, Semantic Structure, Content and SEO, Behaviour, Accessibility References and Acceptance Criteria. Behaviour says: Use a leading or a trailing icon, not both. Stage 3, AI-assisted build: Cursor shows the Button theme taken from that specification, with the O2 primary inverse — white fill, blue text, radius 8 — and the Virgin Media secondary inverse outline — transparent fill, white text, radius 9999. The icon lines use a leading plus or a trailing chevron, not both. Stage 4, Review: the component is checked against the Figma reference. On O2 blue it is the primary inverse, then a leading plus and Add Item. On Virgin Media red it is the secondary inverse outline pill, then a trailing chevron and Continue. The sequence returns to the schematic.

Still of the reviewed Button. On O2 blue, the primary inverse Button is white with blue text and an 8 pixel corner radius. On Virgin Media red, the secondary inverse outline is a pill with a white border and white text. On Air and VM Circular VIP are not available, so the labels use the portfolio stand-in fonts.