Spryker

Components Overview

Stable

All available components — visually showcased with live interactive previews.

View in Figma

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

Form controls

7

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.

Feedback

2
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.

142 active products across 8 categories.

Tabs

18 variants

Docs Figma

Contextual navigation between related views within the same page.

247 items · Page 3 of 10

…

Pagination

24 variants

Docs Figma

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

Data display

1
ProductStatus
Air Filter$24.50Out of Stock
Oil Change Kit$38.00Low Stock
Brake Pad Set$89.99In Stock

Table

12+ variants

Docs Figma

Enterprise data grid with sorting, selection, badges, and pagination.

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