Spryker

Components Overview

All available components — visually showcased with live interactive previews.

17 production-ready components, all built on semantic tokens and available in the Design System Figma file. Click into any component below for full documentation, token reference, and usage guidelines.

Form controls

8

Button

576 variants

Docs Figma

Triggers actions — primary, secondary, tertiary, and destructive.

Input

36 variants

Docs Figma

Single-line text field with leading icon, states, and validation.

0 / 500

Textarea

12 variants

Docs Figma

Multi-line text input for longer form content and descriptions.

Select

24 variants

Docs Figma

Dropdown for choosing one option from a structured list.

Checkbox

15 variants

Docs Figma

Multi-select control supporting unchecked, checked, and indeterminate.

Radio Button

10 variants

Docs Figma

Single-select control for mutually exclusive options.

Dark mode
Notifications
2FA enabled

Toggle

8 variants

Docs Figma

Binary on/off switch for immediately-applied settings.

Search

12 variants

Docs Figma

Search input and results panel for product discovery.

Feedback

4
In StockLow StockOut of StockBackorderedDraft

Badge

40 variants

Docs Figma

Compact status label — 5 tones, subtle and solid variants.

Your export is ready. Click to download.

Order #1042 shipped successfully.

3 products have low stock levels.

Payment failed. Please try again.

Alert

8 variants

Docs Figma

Contextual feedback for success, warning, error, and info states.

Tooltip text

Tooltip

4 variants

Docs Figma

Small label that appears on hover or focus to describe an element.

Spinner

12 variants

Docs Figma

Indeterminate loading indicator in four sizes and two tones.

142 active products across 8 categories.

Tabs

16 variants

Docs Figma

Contextual navigation between related views within the same page.

247 items · Page 3 of 10

…

Pagination

22 variants

Docs Figma

Navigate between pages of data with prev/next and page number items.

Breadcrumb

20 variants

Docs Figma

Hierarchical path navigation showing the user's location in the site.

Media

1
JDAKMRSP

Avatar

96 variants

Docs Figma

Circular image or initials representing a user or entity.

Layout

1

Section one

Section two

Section three

Divider

4 variants

Docs Figma

Thin line that separates content or groups of content.

All components are in Figma

Every component, variant, and token is built in the Design System Figma file. Use the Shift+I shortcut to open the Components panel and drag any component directly into your designs.

Open in Figma