Pattern Gallery

Buttons

Spec: WMG Chords — Buttons (Figma) (primary, secondary, tertiary underline, ghost, pill). Reference: Storybook: Button.

Variants

Primary Secondary Tertiary Ghost Text link Disabled

Sizes (primary)

Small Medium Large XLarge

Tertiary small

Small label

With icons

Export Next Back

Action pair (do: primary right)

Cancel Save

Filters

Pills (default vs altered fill), horizontal scroll, sort affordance, reset when 3+ altered, filter trigger with count. Patterns from the Filters page.

Filter trigger + pills (3+ with reset)

☰ 3

Platform ▾ Region +2 Status ▾

✕

Filter(s) applied: Spotify × US × Clear filters

Sorting (icon differentiation)

⇅ Newest first

Pagination

For review. Range label (e.g. 1 - 20 of 345) is right-aligned in the row so it sits beside the controls with a 10px gap; grouped buttons (flush, 8px outer corners) — previous/next, or first/previous/next/last. Disabled controls are muted; hover uses a light focus-blue wash. Matches Figma: Pagination.

1 - 20 of 345 users

First / previous / next / last

1 - 20 of 345 users

Tabs

Section-level switching; active tab uses strong indicator + weight. Not for global navigation.

Overview Details History

Overview content for this view.

Segmented data card

Figma 10078:2943 — 188px wide, 16px padding, 16px gap under the 3px bar, 8px inner stack, 32px metric, footer uses one 14px solid caret + 4px gap to the label. Share Dev Mode measurements if anything still differs. Figma.

Streams 16.8M 8% WoW Organic 7.6M -2% WoW Spend $101k 3% MoM Forecast — Unavailable

Selected metric drives the visualization below (demo only).

Segmented control

Max 4 segments; inset track (charcoal) with 3px padding, segments flush inside with inner corner radius; selected segment uses WMG yellow on a raised grey fill. Hug content or fill the row. Reference Figma: Segmented control.

Hug content

7D 30D 90D 1Y

Fill container

Table Chart Split

Form field

Persistent label (not placeholder-only), optional required marker, helper text. Storybook: Form field

Artist name *

ⓘ As shown on streaming services.

Text input field

Variants and validation states; 40px / 48px heights align to dropdown sizes. Uses alpha input backgrounds per color tokens.

Email

XLarge (48px)

Large / default (40px)

Error

! Enter a valid email.

Success

✓ Label verified.

Warning

⚠ Changes not saved.

Disabled

Text area

Storybook: Textarea

Release notes

Dropdowns

Single- and multi-select patterns; 40px / 48px heights. Native select for baseline; custom menu for interaction demo.

Region (native) Select a region North America Europe Latin America Asia Pacific

Artist (custom)

Select an artist

• Artist A
• Artist B
• Artist C

Checkboxes

Parent / child hierarchy and indeterminate parent. States match WMG Chords (Figma) form controls. Storybook: Checkbox

States

Unchecked Checked Indeterminate Disabled Error

Grouped (parent + children)

All territories

North America Europe Latin America

Standalone

Send me product updates Disabled

Radio buttons

16px control, 8px gap to label; WMG blue dot when selected. States match Figma: Radio. Storybook: Radio group

States

Unchecked Checked Disabled Disabled selected Error

Grouped

Visibility

Public Unlisted Private (locked)

Switches

42×24 track, 16px thumb; matches Figma — Switch states. Storybook: Toggle

States

Settings rows

Show advanced columns

Notify on anomalies

Disabled

Date picker

Custom calendar popover (WMG blue accents) aligned with Figma — Date field and Figma — Date range picker. Field shell matches text inputs; native type="date" cannot style the dropdown.

Default

Reporting period *

Validation or hint copy (caption style)

Input groups

Prefix / suffix affixes for currency, units, or domains.

Budget

$ USD

Profile URL

https:// .wmg.com

Field message

Helper, error, success, and warning copy tied to fields. Storybook: Field message

ⓘ Helper: optional field.

! Error: fix before continuing.

✓ Success: saved.

⚠ Warning: review recommended.

Button group

Connected actions sharing one border; use for tight related operations (e.g. view modes).

− 100% +

Alerts

Page-level messaging: error, warning, success, and info. Full-width placement; optional dismiss and inline links. Align copy and severity to the Alerts guidance in zeroheight.

✕

Payment failed

We could not charge the card on file. Update billing or try again.

×

⚠

Review before publish

Three tracks are missing ISRC metadata.

✓

Campaign saved

Changes sync to partners within a few minutes.

ⓘ

New analytics beta

Opt in from Settings → Labs.

Breadcrumbs

Truncate long paths with ellipsis on earlier segments; current page is non-link with aria-current="page".

Long path (truncate middle in product)

Filter tags

Dedicated tag variants (secondary, static, sizes) with optional dismiss — separate from the filter toolbar pills above. Storybook: Tag

Spotify × Static tag Small × 🎵 Large ×

Labels

Uppercase caption labels for sections, metadata, or table headers. Storybook: Label

Section On surface

Loaders

Inline spinners for panels and buttons; pair with concise status text where helpful. Storybook: Spinner

With label

Loading releases…

Status badges

Pill badges with optional dot for live states (error, warning, success, info).

Failed Pending review Live Beta

Toasts

301px, blurred status surface, icon + headline + body; dismiss on error only — see Figma — Toast.

Headline

Supporting copy if needed.

Label

Headline

Supporting copy if needed.

Headline

Supporting copy if needed.

Headline

Supporting copy if needed.

Live toasts (fixed top-right)

Success Error Warning Info

Snackbars

Bottom-aligned transient messages with optional action; use for undo or low-friction follow-ups (distinct from toasts in placement and density).

Playlist updated. Undo ×

Dense

Link copied to clipboard.

User header

Avatar, primary name, secondary line, and actions (settings, sign out). Storybook: User header

CE

Cody Evol

cody.evol@wmg.com · Admin

Settings

Cards

Contained surfaces with header, body, and footer actions.

Release summary

12 tracks · 3 pending QC · Last sync 2h ago

View Open

Territories

US, UK, DE selected. Draft

Edit

Table views

Dense list and permissions tables: percentage columns, truncation and +N tooltips, info icons, zebra rows, and optional bulk selection. See the Table views page for guidelines and examples. Figma: User management (overflow).

Data tables

Sticky header, row hover, badge column, em dash for empty cells. Sort affordance on headers where applicable.

Asset	ISRC ↕	Status	Actions
A Midnight Drive	USAT21601234	Live	Edit
B Neon Skyline	—	Review	Edit
C Echo Chamber (remix)	GBUM71607890	Blocked	Edit

Empty states

Onboarding, no results, and error recovery — icon, title, supporting copy, primary CTA.

📂

No releases yet

Import a catalog or create your first release to see it here.

Create release

🔍

No matches

Try adjusting filters or search with different keywords.

Clear filters

⚠

Could not load data

Something went wrong. Check your connection and try again.

Retry

Modals

Native <dialog> for focus management and Escape to close; pair primary/secondary actions per button guidance. The form layout uses a 680 px max width with a two-column field grid, matching Figma: Modal (forms).

Open confirmation modal Open form modal

Tooltips

Simple hover/focus tooltips and richer panels with title + actions. Prefer concise strings; delay show in product for pointer stability. Storybook: Tooltip

Hover or focus me Short helper text. Rich tooltip

Delivery regions

US and Canada are enabled. Add EU from Territory settings.

Dismiss Open settings