Playground

Drive a real component's props from the controls and read the matching code back. Hit shuffle for a random combination. Each component's docs page opens the same playground from its table of contents.

Alert

Playground variant

Appearance
Variant
Appearance
Size
Content
Title
Icon
Description
Close button

Badge

New

Playground variant

Appearance
Variant
Appearance
Size
Content
Label
Leading dot
State
Disabled

Button

Playground variant

Appearance
Variant
Size
Radius
Content
Label
Icon only
Leading icon
Trailing icon
State
Disabled

Checkbox

Playground variant

Appearance
Variant
Size
Content
Label
Label text
State
Checked
Disabled

Chip

Playground variant

Appearance
Variant
Size
Shape
Selection
Type

Icon tile

Playground variant

Appearance
Variant
Tone
Size
Radius
Content
Icon

Input

Playground variant

Appearance
Size
Appearance
Content
Placeholder
Type
State
Disabled
Read only

Switch

Playground variant

Appearance
Shape
Size
State
Checked
Disabled

Tabs

Overview panel content.

Playground variant

Appearance
Variant
Shape
Size