Button

Default appearances (medium)
Default Primary Outline Subtle Transparent
Sizes
Small Medium Large
Shapes
Rounded Circular Square
Disabled
Disabled Primary Disabled

Badge

Appearances (brand, medium)
Filled Ghost Outline Tint
Filled by color
Brand Danger Important Informative Severe Subtle Success Warning
Sizes (brand)
6 99 12 Medium Large XL
Shapes (brand)
Rounded Circular Square

Checkbox

Unchecked Checked Indeterminate Disabled Disabled checked

Switch

Off On Disabled Above label

Radio

Option A Option B Option C Disabled

Slider

Text Input

Textarea

Select

Image

Card

Card Title Card description content goes here. Outline Card With outline appearance.

Label

Default label Required label Disabled label Large semibold label

Text

Heading text (500) Body text (300) Caption text (200) Italic text Underlined text Strikethrough text Monospace text Centered text

Dialog

Open Dialog Dialog Title This is a dialog body. Press Escape or click outside to close. Confirm Cancel

Tooltip

Hover me This is a helpful tooltip!

Tree

Item 1 Item 1.1 Item 1.2 Item 2 Item 2.1 Item 2.1.1 Item 2.2 Item 3 Item 4 (disabled)

Divider

Start Center End Brand Strong Subtle

Spinner

Avatar