Icons

Icons 20px

  • arrow-down
  • arrow-external-link
  • arrow-left
  • arrow-right
  • arrow-up
  • audio
  • audio-mute
  • bell
  • burger
  • calendar
  • cart
  • check
  • circle-info
  • close
  • facebook
  • filter
  • instagram
  • like
  • linkedin
  • loader
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • minus
  • minus-small
  • pause
  • pinterest
  • placeholder
  • play
  • plus
  • plus-small
  • profile
  • resize-handle
  • search
  • star
  • tiktok
  • twitter
  • warning

Icons 16px

  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • bell
  • box
  • circle-info
  • close
  • gift
  • loader
  • placeholder
  • promo-code
  • star
  • star-empty
  • star-half
  • verified-check
  • warning

Responsive — 16 below 768, 20 above

  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • circle-info
  • close
  • loader
  • placeholder
  • warning

Payment icons

  • afterpay
  • american-express
  • apple-pay
  • boleto
  • diners-club
  • discover
  • elo
  • google-pay
  • hipercard
  • klarna
  • mastercard-dark
  • mastercard-light
  • paypal
  • pix
  • shop-pay
  • visa-dark
  • visa-light
  • flex
  • klarna-logo
  • flex-logo

Store badges

  • app-store
  • google-play

Flags (16)

  • australia / AU
  • brazil / BR
  • canada / CA
  • european-union
  • france / FR
  • germany / DE
  • israel / IL
  • italy / IT
  • new-zealand / NZ
  • spain / ES
  • sweden / SE
  • switzerland / CH
  • ukraine / UA
  • united-arab-emirates / AE
  • united-kingdom / GB
  • united-states / US

Media icons

  • quote
  • laurel

Labels

Styles

  • New Primary
  • Bestseller White on a card surface
  • Bestseller White on page — invisible by design
  • Pre-order Outline
  • Unisex Secondary
  • Save 20% Accent
  • Gift Leading icon — gift
  • Summer20 Leading icon — promo code
  • Bundle deal Longest production copy
  • New Size s
  • Pre-order s below 768, m from 768

Selection controls

Checkbox & radio

  • Default
  • Checked
  • Disabled
  • Disabled, checked
  • No label
  • Default
  • Selected
  • Disabled
  • Disabled, selected
  • Unchecked
  • Checked
  • Leading icon
  • Subtitle
  • Disabled
  • Group — selected
  • Group — unselected
  • Subtitle
  • Disabled

Scrollbar

  • Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Light

  • Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Scroll this box to see the thumb. The 16px area is a reserved gutter, so the bar never sits on top of the content.

    Dark

Checkbox & radio: kinds and states

  • checkbox row, default
  • checkbox row, checked
  • checkbox row, hover
  • checkbox row, hover & checked
  • checkbox row, focus-visible
  • checkbox row, disabled
  • checkbox row, disabled & checked
  • checkbox field, default
  • checkbox field, checked
  • checkbox field, hover
  • checkbox field, hover & checked
  • checkbox field, focus-visible
  • checkbox field, disabled
  • checkbox field, disabled & checked
  • checkbox control, default
  • checkbox control, checked
  • checkbox control, hover
  • checkbox control, hover & checked
  • checkbox control, focus-visible
  • checkbox control, disabled
  • checkbox control, disabled & checked
  • checkbox row with color & count, default
  • checkbox row with color & count, checked
  • checkbox row with color & count, hover
  • checkbox row with color & count, hover & checked
  • checkbox row with color & count, focus-visible
  • checkbox row with color & count, disabled
  • checkbox row with color & count, disabled & checked
  • checkbox row with a long label, default
  • radio row, default
  • radio row, checked
  • radio row, hover
  • radio row, hover & checked
  • radio row, focus-visible
  • radio row, disabled
  • radio row, disabled & checked
  • radio field, default
  • radio field, checked
  • radio field, hover
  • radio field, hover & checked
  • radio field, focus-visible
  • radio field, disabled
  • radio field, disabled & checked
  • radio control, default
  • radio control, checked
  • radio control, hover
  • radio control, hover & checked
  • radio control, focus-visible
  • radio control, disabled
  • radio control, disabled & checked

Toggle: values and states

  • on, default
  • on, hover / pressed
  • on, focus-visible
  • on, disabled
  • on-left, default
  • on-left, hover / pressed
  • on-left, focus-visible
  • on-left, disabled
  • off, default
  • off, hover / pressed
  • off, focus-visible
  • off, disabled

Counter

Specimens

  • 1 Default — minus disabled at the minimum
  • 3 Between the bounds — both buttons live
  • 10 At the maximum — plus disabled
  • 5 Step 5 — clamped to the ceiling
  • 1 Cart line — minus removes at 1
  • 2 Named item — labels say which product
  • 999 Three digits — the widest the box holds
  • 4 4 B2B M — case pack 4
  • 10 10 B2B L — case pack 10
  • 10 10 B2B M below 1200, L from 1200 — case pack 10
  • 40 40 B2B at the maximum — plus disabled
  • 10000 10000 B2B five digits, the field grows
  • 10 10 B2B step 10, max 35 - plus stops at 30
  • 15 Off-grid line - 15, min 10, step 10, base 10, remove at min
  • 2 Below rule min - value 2, min 2, base 10, step 5
  • 2 Below rule min - value 2, min 2, base 10, step 5, max 5 - plus disabled
  • 12 Off-grid, base != step - value 12, min 10, base 10, step 5

Bound action — press a specimen to see what it receives

Price

Sizes and sale

  • $59.00 s — no sale
  • $59.00 $159.00 s — on sale
  • $59.00 m — no sale
  • $59.00 $159.00 m — on sale
  • $159.00 Compare-at below the price — no fake discount
  • $0.00 Zero — a free item still shows a price
  • $1,299.00 $2,599.00 Four figures — the longest pair on one line
  • Empty price — the snippet renders nothing
  • $195.00 ($19.50/unit)
    m — pack price with unit price
  • $156.00 $195.00 ($15.60/unit)
    m — pack on sale with unit price
  • $195.00 ($19.50/unit)
    s - pack price with unit price

Buttons

Add or duplicate blocks in the customizer to line up any combination, grouped by variant — click a button (loading is real, ~800ms) or tab to it.

Button

button — this.q('action-button').run(fn)
button — this.q('action-button').confirmAction(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)
Continue Continue Continue button — this.q('action-button').run(fn)
button — this.q('action-button').run(fn)

Button-icon

button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()
button-icon — same <action-button>, same run()

Button-icon-square

button-icon-square — same base as button-icon, .action-button-icon--square modifier
button-icon-square — same base as button-icon, .action-button-icon--square modifier
button-icon-square — same base as button-icon, .action-button-icon--square modifier
button-icon-square — same base as button-icon, .action-button-icon--square modifier
button-icon-square — same base as button-icon, .action-button-icon--square modifier
button-icon-square — same base as button-icon, .action-button-icon--square modifier

Button-play

button-play — white-inverse/m only, per Figma
button-play — white-inverse/m only, per Figma
button-play — white-inverse/m only, per Figma
button-play — white-inverse/m only, per Figma

Focus

Focus must always be visible. Secondary and white also carry a second, outer ring (control-border-focus-inverse) for contrast when they sit on top of media.

Light surfaces — primary: single ring. secondary: double ring (used over media)
Dark surfaces — single ring, inverse colour

Link button

Text-only button with an underlined label, every state on both surfaces. Each label, link and action below is a snippet parameter.

Interactive states

size
M is the default; S is 14px Regular and looks the same in both styles.
hover / pressed
Hover any link below, or press and hold. On the dark surface the colour does not change — resting already sits at full strength.
focus-visible
Tab to a link. The ring hugs the text and stretches with a longer label.
disabled
The last two rows, as a button and as a link. Tab straight past both.

Surface light

Size M · accent

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Size M · line

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Size S · accent

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Size S · line

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Surface dark

Size M · accent

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Size M · line

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Size S · accent

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Size S · line

Default

As a link (href)

View details

Long label — no truncation

Disabled — button

Disabled — link

View details

Action

The snippet takes no action parameter. This section reaches the element in its own subtree and hands it a function: this.q('link-button').run(fn) . Activate it with Enter or Space.

Nothing activated yet.

Select

Select

  • Default, light
  • Default, dark
  • Filled, light
  • Filled, dark
  • Disabled, light
  • Disabled, dark

  • This is a hint text to help user

    Hint, light

  • This is a hint text to help user

    Hint, dark

  • This is an error message

    Error, light

  • This is an error message

    Error, dark

  • This is an error message

    Error, filled, light

  • This is an error message

    Error, filled, dark
  • Search
  • Icon, name, required
  • Flag
  • Search, custom copy, capped list
  • Simple, filled
  • Search, fit to viewport

Select modal

    • United States
    • Canada
    • Ukraine
    • United Kingdom
    • Germany
    • France
    Light, default
    • United States
    • Canada
    • Ukraine
    • United Kingdom
    • Germany
    • France
    Light, search
    • United States
    • Canada
    • Ukraine
    • United Kingdom
    • Germany
    • France
    Dark, default
    • United States
    • Canada
    • Ukraine
    • United Kingdom
    • Germany
    • France
    Dark, search

Select tab

    • Label
    Light, default
    • Label
    Light, selected
    • Label
    Dark, default
    • Label
    Dark, selected
    • Label
    Disabled
    • Label
    With icon
    • Label
    With icon, selected
    • Label
    With flag
    • Label
    With flag, selected
    • A very long option label that has to truncate
    Content overflow

Date field

  •
    Default
  • Filled
  • Disabled

  • This is a hint text to help user

    Hint

  • This is an error message

    Error

  • This is an error message

    Error, filled

Date picker

  • SuMoTuWeThFrSa
    Default
  • MoTuWeThFrSaSu
    Week starts Monday

Input

Single-line text field, every state on both surfaces. Each sample string below is a snippet parameter — nothing is hardcoded in the component.

Interactive states

hover / pressed
Hover any field above, or press and hold.
focus
Click into a field, or Tab to it.
focus-typing
Focus a field and type. The placeholder sits next to the caret until you do.

Surface light

default

filled

disabled

error

Please fix the highlighted field

error-filled

Please fix the highlighted field

success

Success message!

hint

This is a hint text to help user

icon-left

icon-right

icon-both

long-value

button

button-filled

button-disabled

button-error

Please fix the highlighted field

button-success

Success message!

button-clear

button-async

Surface dark

default

filled

disabled

error

Please fix the highlighted field

error-filled

Please fix the highlighted field

success

Success message!

hint

This is a hint text to help user

icon-left

icon-right

icon-both

long-value

button

button-filled

button-disabled

button-error

Please fix the highlighted field

button-success

Success message!

button-clear

button-async

Textarea

Multi-line text field, every state on both surfaces. Each sample string below is a snippet parameter — nothing is hardcoded in the component.

Interactive states

hover / pressed
Hover any field above, or press and hold.
focus
Click into a field, or Tab to it.
focus-typing
Focus a field and type. The placeholder sits next to the caret until you do.
resize
Drag the grip in the bottom-right corner. Pointer only — it takes no keyboard. Height is clamped between the section's height and max height settings.

Surface light

default

filled

overflow

disabled

error

Please fix the highlighted field

error-filled

Please fix the highlighted field

success

Success message!

hint

This is a hint text to help user

Surface dark

default

filled

overflow

disabled

error

Please fix the highlighted field

error-filled

Please fix the highlighted field

success

Success message!

hint

This is a hint text to help user

Tooltip

Trigger and bubble are one component. The guide binds the log below through onToggle().

Interactive states

hover
Point at a trigger in the interactive row. The icon takes the hover colour and the panel opens after the open delay; moving away closes it after the close delay.
active
Press and hold a trigger.
focus-visible
Tab to a trigger: the focus ring shows and the panel opens. A mouse click opens it without the ring.
Escape
Closes the open panel and leaves focus on its trigger.
dismiss
Click the close button of an open panel. Focus returns to the trigger that opened it.
mutual exclusion
Open one float specimen, then another: the first closes itself.
disabled
The disabled specimen stays reachable with Tab and announces itself as disabled, but never opens.

Static review

  • Top · arrow start - the default
  • Top · arrow center
  • Top · arrow end
  • Bottom · arrow start
  • Right · arrow center
  • Left · arrow center
  • Title only
  • Description only - close button asked for and ignored
  • Close button off
  • Close button label - announces "Hide delivery details", not the shared Close translation
  • Disabled trigger - focusable, never opens
  • Long copy - wraps and scrolls
  • Narrow - max width 128px
  • Visible trigger label
  • Accessible name composed - the visible "Delivery" leads: "Delivery estimate details"
  • Accessible name verbatim - it already starts with "Delivery": "Delivery estimate details"
  • Accessible name verbatim - punctuation separator, not a space: "Delivery: estimate details"
  • 20px trigger icon
  • Warning icon
  • Placeholder icon

Interactive

  • Hover - the default event
  • Click to open
  • Flip off - keeps the authored side
  • Pair 1 of 2 - opening this closes the other
  • Pair 2 of 2 - opening this closes the other

Viewport edges

  • Left edge. Stays on the right: the panel lands 8px from the viewport and the arrow tracks the trigger centre.
  • Right edge. Flips to the left: the panel right edge lands 8px from the viewport.
  • Scroll track
    Top edge. Scroll the trigger up to the top band, then open it: the panel flips below, the arrow offset clamps to 24px, apex within ~2px of the icon centre.
Bound through onToggle() - open a specimen to see what it reports

Message

Warning and info, with an optional close on warning. The guide binds dismiss through run() and drives bound specimens over the bus.

Interactive states

hover
Point at the close button of a dismissible warning: nothing changes, like the drawer close. No plate appears behind the X, and the ring shows on keyboard focus only.
active
Press and hold the close button: no plate appears either.
focus-visible
Tab to the close button: the focus ring shows. It is the only tab stop of a message. Enter or Space dismisses it.
disabled
The X greys out, drops out of the tab order and ignores clicks.
dismiss
Closing a message hides it and runs the action the guide bound through run(). The log below reports the reason, and focus moves to that specimen's Show button, or to the log when there is none.
bus
Bound specimens listen to their own topic. Show and Hide publish true or false to it, and the message reconciles to that value, including after a customizer re-render.
starts hidden
A hidden specimen renders nothing visible until its topic turns true. A value already published on the bus wins over this setting until the page reloads.

Specimens

  • This item can't ship to your address

    Warning - the default

  • Pre-order - ships in 3 weeks

    Info

  • Some items in your cart have changed

    Topic message-message_warning_close_bus:activeWarning + close, bound to the bus

  • Some items in your cart are no longer available in the size or colour you picked, so they were removed before checkout

    Warning + close, long copy wraps

  • Items from this collection ship separately from the rest of your order and may arrive a few days later

    Info, long copy wraps

  • This item is no longer available

    Warning + close, close disabled
  • Topic message-message_hidden_bus:activeHidden until shown via the bus

  • Your delivery address could not be verified

    Warning + close, custom close label
  • Empty text - renders nothing

  • Free returns within 30 days

    Info with close on - info never shows a close button
  • Do not use: starts hidden, not bound - can never be shown
Bound through run() - dismiss a specimen or use Show/Hide to see what it reports

Message - no-log variant

Interaction log off. After a dismiss, focus moves to the specimen's Show via bus button, or to the specimen cell when it is not bound.

Interactive states

hover
Point at the close button of a dismissible warning: nothing changes, like the drawer close. No plate appears behind the X, and the ring shows on keyboard focus only.
active
Press and hold the close button: no plate appears either.
focus-visible
Tab to the close button: the focus ring shows. It is the only tab stop of a message. Enter or Space dismisses it.
disabled
The X greys out, drops out of the tab order and ignores clicks.
dismiss
Closing a message hides it and runs the action the guide bound through run(). With no log on this section, focus moves to that specimen's Show button, or to the specimen cell when there is none.
bus
Bound specimens listen to their own topic. Show and Hide publish true or false to it, and the message reconciles to that value, including after a customizer re-render.
starts hidden
A hidden specimen renders nothing visible until its topic turns true. A value already published on the bus wins over this setting until the page reloads.

Specimens

  • Some items in your cart have changed

    Topic message-message_nolog_bound:activeWarning + close, bound - focus goes to Show via bus

  • This item is almost sold out

    Warning + close, not bound - focus goes to this cell

Toast

Global error toasts raised over the bus. Each button publishes toast:raised; the stack in the layout renders it.

Behaviour

lifetime
A toast disappears 4 seconds after it appears.
pause
Pointing at the stack or moving focus into it freezes every timer. Leaving resumes each toast with the time it had left.
stack
Up to three at once, newest on top. A fourth removes the oldest silently. The same id shows once.
close
The X removes a toast early. Focus returns to where it was before it entered the stack.
drawer
While the slide cart drawer is open, toasts show inside its panel under the drawer header, and the page stack is hidden.
publish
One line from any component: bus.publish('toast:raised', { id: crypto.randomUUID(), text }). Blank text or a missing id is ignored and logs console.error.

Specimens

  • Single toast
  • Burst of 4 - the oldest is removed, (2) (3) (4) stay
  • Long copy wraps
  • Delayed 6s - open the slide cart drawer to see it in the panel
  • Two toasts, one id - only the first shows
  • Blank text - nothing shows, console.error

Segmented control

Two to four mutually exclusive views of the same content, switched in place. The guide binds every specimen through run() and can share state over the bus.

Interactive states

hover
Point at an unchosen segment: its cell darkens and the label lifts to full strength, on both surfaces. The chosen segment does not change.
pressed
Press and hold an unchosen segment: the same fill as hover, on touch too.
focus-visible
Tab into a control: focus lands on the chosen segment and the ring shows 4px outside the pill. The control is one tab stop.
disabled
Label and icons dim to 40%, the container stays as it was, and the keyboard skips the segment.
keyboard
Arrow keys move and select, wrapping at the ends. Home and End pick the first and last enabled segment.
action
The guide binds each specimen through run(). An async action raises aria-busy on the control until it settles, and a failed one rolls the choice back.
bus
Specimens with a topic publish their choice to it and reconcile to it, so two controls on one topic stay in sync, including after a customizer re-render.

Specimens

  • Primary M - chosen, default, hover
  • Primary M - disabled, disabled chosen, focus
  • Primary M - focus on the chosen tab
  • Primary S - chosen, default, hover
  • Primary S - disabled, disabled chosen, focus
  • Primary S - focus on the chosen tab
  • Secondary M - chosen, default, hover
  • Secondary M - disabled, disabled chosen, focus
  • Secondary M - focus on the chosen tab
  • Secondary S - chosen, default, hover
  • Secondary S - disabled, disabled chosen, focus
  • Secondary S - focus on the chosen tab
  • Four segments - the maximum
  • Icon left
  • Icon right
  • Icons on both sides
  • Icon only - labels become accessible names
  • Do not use: long labels overflow the pill
  • Adaptive - S below 768, M from 768
  • Recent view
    Panels switched through run()
  • Recent view
    Async action - aria-busy for 800ms
  • Recent view
    Failing action - rolls back after 800ms
  • Topic segmented-control-demo:activeShared topic - A
  • Topic segmented-control-demo:activeShared topic - B, failing action
Bound through run() - pick a segment to see what it reports

Breadcrumbs

Where the page sits in the store: Home, then each parent, the current page last. The trail starts at the beginning with Home visible; the clipped tail scrolls sideways into view.

Interactive states

default
Every level before the last is a link in text/secondary. A level without a URL is plain text.
hover / pressed
Point at or press a link: the label is underlined from the font, the colour does not change.
focus-visible
Tab onto a link: a 2px ring shows 4px outside the label, also with both paddings removed.
current
The last level is the current page: text/primary, no underline, not a link and skipped by Tab.
keyboard
Tab and Shift+Tab walk the links. A link scrolled out of view scrolls back in when it takes focus.
scroll
A trail that does not fit scrolls sideways without wrapping or truncating. It starts at the beginning with Home visible; the tail is clipped and scrolls into view.
setLevel
Add level appends one trailing level and turns the previous last level into a link; Clear level removes it again.
bus
Specimens with a topic take the same { title } or null from the bus and restore it after a customizer re-render.
run()
Bound specimens report every link click. A click on the level right under the added one clears it instead of navigating; Cmd or Ctrl-click still opens the link.

Specimens

Add or clear a level, or click a link in a bound specimen

Filter dropdown

One filter of the collection page: a title row that opens a list of values. The guide binds every specimen through run().

Interactive states

hover
Point at the title row: title, count and arrow turn control/content/secondary. Point anywhere on a value row: its checkbox or radio shows the control hover.
active
Press and hold the title row: it shows the same colour as hover.
focus-visible
Tab to the title row: a 2px ring around the whole row. Tab into the values: a 2px ring 4px outside each row, and a ring around each size tile.
disabled
A disabled dropdown stays closed, turns control/content/disabled and drops out of the tab order. A disabled value is skipped too.
keyboard
Enter or Space on the title row opens and closes it. Tab moves through every checkbox; a radio group is one tab stop and arrow keys move inside it. Space toggles a checkbox.
run()
Every specimen is bound through run() and writes each toggle and change payload to the log below. Async mode raises aria-busy for 600 ms; fail mode rolls the value back.

Specimens

  • Colour rows with swatch and count, title count
  • Radio rows: single choice, no count
  • Tops
    Bottoms
    Groups of rows
  • Sizes
    Combined sizes
    Groups of size tiles; a long value spans 2 columns with the wide flag
  • Closed, mobile padding
  • Closed, tablet and desktop padding
  • Disabled
  • Long value wraps
Bound through run() - open a filter or pick a value to see the payload

Filters bar

PLP row above the product grid: results, Sort by, Filters and quick filters. The guide binds every specimen through run().

Interactive states

hover
Point at Filters, a quick filter or Sort by: label, count and icon turn control/content/secondary. Clear all filters keeps the link-button hover.
active
Press and hold a trigger: it shows the same colour as hover.
focus-visible
Tab into a specimen: a 2px ring 4px outside each trigger, only from the keyboard.
disabled
A disabled trigger turns control/content/disabled, drops out of the tab order and ignores clicks.
keyboard
Tab follows the visual order: Filters, quick filters, Clear all, Sort by from 1200; Sort by, Filters below it. Enter or Space runs the bound action.
run()
Every specimen is bound through run() and reports its id with filters, sort, filter and its key, or clear to the log below. The bar never opens anything itself.
below 1200
Only the results and Sort by | Filters stay. Quick filters and Clear all show from 1200.

Specimens

    60 Results

    Auto - follows the viewport, quick filters from 1200

    60 Results

    1200 - applied (Filters · 4, Color · 2), Clear all filters on

    60 Results

    1200 - Clear all filters on, nothing applied: not shown

    60 Results

    1200 - disabled: Filters, quick filters, Sort by

    60 Results

    768 - applied (Filters · 4)

    60 Results

    390 - default

    60 Results

    390 - applied (Filters · 4)

    60 Results

    390 - disabled: Sort by, Filters
Bound through run() - click a trigger to see what it reports

Size guide

Still unsure about your size? Drop us a line and we'd be happy to help! Contact us here

Overview

Notify me when it’s back

Enter your email and we’ll let you know the moment this item is back in stock.