Playground - Vibrant UI

Vibrant UI

Vibrant UI Playground

Badge

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9

9+

9+

9+

9+

999+

Button

Button Group

Card

SubtleCard content

SoftCard content

MutedCard content

OutlinedCard content

RaisedCard content

SubtleCard content

SoftCard content

MutedCard content

OutlinedCard content

RaisedCard content

SubtleCard content

SoftCard content

MutedCard content

OutlinedCard content

RaisedCard content

SubtleCard content

SoftCard content

MutedCard content

OutlinedCard content

RaisedCard content

SubtleCard content

SoftCard content

MutedCard content

OutlinedCard content

RaisedCard content

Hello

Checkbox

Label

Label

Label

Label

Label

Label

Disabled

Disabled

Disabled

Disabled

Disabled

Disabled

Required

Invalid

Full width

Increased hit slop

By checking the checkbox you accept the terms and conditions.

Composition:

Checkbox card

Icon

Inline

Flex

Container

Shape

Label

LightNormalMediumBoldBolder

Required

Link

Light Normal Medium Bold Bolder

Plain Underlined

Neutral Blue Indigo Violet Purple Fuchsia Pink Red Orange Amber Yellow Lime Green Teal Cyan

Increased hit slop

Modal

Progress Circle

40%

40%

40%

40%

40%

40%

40%

40%

40%

40%

40%

40%

40%

40%

40%

0%

0%

0%

0%

0%

0%

0%

0%

0%

0%

0%

0%

Radio

Label

Label

Label

Label

Label

Label

Disabled

Disabled

Disabled

Disabled

Disabled

Disabled

Required

Invalid

Full width:

Apples

Bananas

Increased hit slop:

Apples

Bananas

Composition:

Shape

Switch

Label

Label

Label

Disabled

Disabled

Disabled

Airplane mode

Wifi

Bluetooth

Typography

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

LightNormalMediumBoldBolder

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger

WeakerWeakMediumStrongStronger