Buttons

For the buttons all sizes are provided and they are the same. Different options are provided which we will add to have at a ready. We will change their names to match the descriptions in the design that we get provided.

They are in 5 sizes and 3 states.

The sizes are from left to right (Extra Small, Small, Base, Large, Extra Large)

The states are from left to right (Default, Hover, Disabled)

The names are as follows by the rows they appear in the picture:

Black with rainbow - Critical

White - Default

White with rainbow - Rainbow Light

Black - Important

Gray (no explanation provided here)

Transparent (no explanation provided here)

Transparent Dark (no explanation provided here)

#RainbowBorder
border-image-source: linear-gradient(89.96deg, #1CC98C 0.03%, #24CBDE 20.52%, #57A9F7 40%, #BD52F9 59.99%, #EBB347 79.98%, #FFF845 99.96%);

#RainbowBorderDisabled
border-image-source: linear-gradient(90.12deg, rgba(28, 201, 140, 0.2) 0.11%, rgba(36, 203, 222, 0.2) 20.16%, rgba(87, 169, 247, 0.2) 39.24%, rgba(189, 82, 249, 0.2) 58.8%, rgba(235, 179, 71, 0.2) 78.36%, rgba(255, 248, 69, 0.2) 97.92%);

#base styles for all buttons
display: inline-flex;
justify-content: center;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-radius: 50px;

#sizes
##extra small
height: 26px; 
padding: 4px 16px; 
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
##small
height: 30px; 
padding: 4px 16px; 
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
##base
height: 38px; 
padding: 4px 24px;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
##large
height: 50px; 
padding: 12px 32px; 
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
##extra large
height: 62px; 
padding: 16px 40px; 
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 155.556% */

#Critical - default && Hover
color: var(--White, #FFF);
border: 2px solid RainbowBorder;
background: var(--Black, #000);
#Critical - disabled
color: var(--White, #FFF);
border: 2px solid RainbowBorderDisabled;
background: var(--Gray-400, #81868F);

#Default - Default && Hover
border: 1px solid var(--Gray-200, #CED1D3);
background: var(--White, #FFF);
color: var(--Gray-700, #4B4D53);
#Default - Disabled
border: 1px solid var(--Gray-100, #E5E7E8);
background: var(--White, #FFF);
color: var(--Gray-400, #81868F);

#Rainbow Light - Default && Hover
border: 1px solid RainbowBorder;
background: var(--White, #FFF);
color: var(--Gray-700, #4B4D53);
#Rainbow Light - Disabled
border: 1px solid RainbowBorderDisabled;
background: var(--White, #FFF);
color: var(--Gray-400, #81868F);

#Important - default && Hover
color: var(--White, #FFF);
border: 2px solid var(--Black, #000);
background: var(--Black, #000);
#Important - disabled
color: var(--White, #FFF);
border: 2px solid var(--Gray-400, #81868F);
background: var(--Gray-400, #81868F);

#Gray - default && Hover
color: var(--White, #FFF);
border: 2px solid var(--Gray-700, #4B4D53);
background: var(--Gray-700, #4B4D53);
#Gray - disabled
color: var(--White, #FFF);
border: 2px solid var(--Gray-300, #ABAFB5);
background: var(--Gray-300, #ABAFB5);

#Transparent - default && Hover
color: var(--Gray-600, #575A63);
#Transparent - disabled
color: var(--Gray-400, #81868F);

#Transparent Dark - default && Hover
color: var(--Gray-200, #CED1D3);
#Transparent Dark - disabled
color: var(--Gray-600, #575A63);