Display

Heading 1

Heading 2

Paragraph Large Text

Raw paragraph text

Raw H2

asdsa
xSmall Shadow
Small Shadow
Medium Shadow
Large Shadow
XLarge Shadow
XXLarge Shadow

Custom Button Showcase

primary Variant
Normal State
xsmall
small
base
large
xlarge
Disabled State
xsmall
small
base
large
xlarge
Loading State
xsmall
small
base
large
xlarge
secondary Variant
Normal State
xsmall
small
base
large
xlarge
Disabled State
xsmall
small
base
large
xlarge
Loading State
xsmall
small
base
large
xlarge
outline Variant
Normal State
xsmall
small
base
large
xlarge
Disabled State
xsmall
small
base
large
xlarge
Loading State
xsmall
small
base
large
xlarge
text Variant
Normal State
xsmall
small
base
large
xlarge
Disabled State
xsmall
small
base
large
xlarge
Loading State
xsmall
small
base
large
xlarge
icon Variant
Normal State
xsmall
small
base
large
xlarge
Disabled State
xsmall
small
base
large
xlarge
Loading State
xsmall
small
base
large
xlarge
icon-outline Variant
Normal State
xsmall
small
base
large
xlarge
Disabled State
xsmall
small
base
large
xlarge
Loading State
xsmall
small
base
large
xlarge
Full Width Example

Custom Input Components Demo

This field is required
This field is disabled

Autocomplete (Large)
Autocomplete (Small)
Autocomplete (Error)
Please select an option
Autocomplete (Full Width)
Autocomplete (Disabled)
This field is disabled
Select (Large)
Select (Small)
Select (Disabled)
This field is disabled
Select (Full Width)

Custom Radio Button Demo

Small Size
With Label
Without Label
Medium Size
With Label
Without Label
Large Size
With Label
Without Label

Checkbox Demo (light mode)

Small
Medium
Large

Toggleable

Disabled Unchecked

Disabled Checked

Badge Component Demo

Small Size
Without Start Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

With Start Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

With Delete Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

With Start and Delete Icons

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

Large Size
Without Start Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

With Start Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

With Delete Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

With Start and Delete Icons

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

No Border Examples (Small Size)
No Border, With Start Icon

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

No Border, With Start and Delete Icons

Gray

Red

Yellow

Green

Blue

Orange

Purple

Pink

Custom Switch Demo with Icon Mode

Current Theme: Light

Icon Mode: Small Switch (42x24px)
Icon Mode: Large Switch (52x32px)
Regular Mode: Small Switch (42x24px)
Regular Mode: Large Switch (52x32px)
Disabled States (Icon and Regular)