| Default | Hover | Focus | Disabled | HTML | ||
|---|---|---|---|---|---|---|
| Red Primary Small |
<button type="button" className="bg-atom_rojored h-[33px] min-w-[30px] rounded tracking-[unset]
text-white leading-[6px] flex items-center justify-center
px-4 py-1.5 focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Primary Medium |
<button type="button" className="bg-atom_rojored h-[43px] min-w-[30px]
rounded tracking-[unset]
text-white leading-[6px] flex items-center justify-center
px-4 py-1.5 focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button> | |||||
| Red Primary Large |
<button type="button" className="bg-atom_rojored h-[55px] min-w-[30px] rounded tracking-[unset]
text-white leading-[6px] flex items-center justify-center
px-4 py-1.5 focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button> | |||||
| Red Primary Floating Action Button - Rectangle small |
<button type="button" className="bg-atom_rojored h-[30px] w-[30px] min-w-[30px] rounded tracking-[unset]
text-white leading-[6px] flex items-center justify-center
focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Primary Floating Action Button - Rectangle meduim |
<button type="button" className="bg-atom_rojored h-[40px] w-[40px] min-w-[30px] rounded tracking-[unset]
text-white leading-[6px] flex items-center justify-center
focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Primary Floating Action Button - Rectangle large |
<button type="button" className="bg-atom_rojored h-[50px] w-[50px] min-w-[30px] rounded tracking-[unset]
text-white leading-[6px] flex items-center justify-center
focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Primary Floating Action Button - Circle small |
<button type="button" className="bg-atom_rojored rounded-full h-[30px] w-[30px] min-w-[30px] tracking-[unset]
text-white leading-[6px] flex items-center justify-center
focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Primary Floating Action Button - Circle meduim |
<button type="button" className="bg-atom_rojored rounded-full h-[40px] w-[40px] min-w-[30px] tracking-[unset]
text-white leading-[6px] flex items-center justify-center
focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Primary Floating Action Button - Circle large |
<button type="button" className="bg-atom_rojored rounded-full h-[50px] w-[50px] min-w-[30px] tracking-[unset]
text-white leading-[6px] flex items-center justify-center
focus-visible:outline
focus-visible:outline-2 hover:bg-atom_indianred
focus-visible:outline-atom_salmonpink disabled:bg-[#d7d7dc] disabled:text-white
disabled:shadow-[0_0_#0003,0_0_#00000024,0_0_#0000001f]
font-medium text-sm">
<i className="text-lg ri-shopping-cart-fill"></i>
</button>
|
| Default | Hover | Focus | Disabled | HTML | ||
|---|---|---|---|---|---|---|
| Red Secondary Small |
<button
type="button"
className="bg-white h-[33px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Secondary Medium |
<button
type="button"
className="bg-white h-[43px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Secondary Large |
<button
type="button"
className="bg-white h-[55px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Secondary Floating Action Button - Rectangle small |
<button
type="button"
className="bg-white h-[30px] w-[30px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Secondary Floating Action Button - Rectangle meduim |
<button
type="button"
className="bg-white h-[40px] w-[40px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Secondary Floating Action Button - Rectangle large |
<button
type="button"
className="bg-white h-[50px] w-[50px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Secondary Floating Action Button - Circle small |
<button
type="button"
className="bg-white rounded-full h-[30px] w-[30px] min-w-[30px] tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Secondary Floating Action Button - Circle meduim |
<button
type="button"
className="bg-white rounded-full h-[40px] w-[40px] min-w-[30px] tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Secondary Floating Action Button - Circle large |
<button
type="button"
className="bg-white rounded-full h-[50px] w-[50px] min-w-[30px] tracking-[unset]
text-atom_rojored leading-[6px] border border-atom_rojored flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:border-[#D7D7DC] disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
|
| Default | Hover | Focus | Disabled | HTML | ||
|---|---|---|---|---|---|---|
| Red Tertiary Small |
<button
type="button"
className="bg-white h-[33px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] flex
items-center justify-center px-4 py-1.5 hover:bg-atom_snowred
focus-visible:border-0 focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:bg-white disabled:text-[#D7D7DC]
font-medium text-sm"
>
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Tertiary Medium |
<button
type="button"
className="bg-white h-[43px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center
px-4 py-1.5 hover:bg-atom_snowred
focus-visible:outline focus-visible:outline-2
focus-visible:outline-atom_salmonpink disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Tertiary Large |
<button
type="button"
className="bg-white h-[55px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center px-4
py-1.5 hover:bg-atom_snowred focus-visible:outline focus-visible:outline-2
focus-visible:outline-atom_salmonpink disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className="mr-2 text-lg ri-shopping-cart-fill"></i>
Button
<i className="ml-2 text-lg ri-arrow-right-circle-line"></i>
</button>
| |||||
| Red Tertiary Floating Action Button - Rectangle small |
<button
type="button"
className="bg-white h-[30px] w-[30px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center px-4 py-1.5
hover:bg-atom_snowred focus-visible:outline focus-visible:outline-2
focus-visible:outline-atom_salmonpink disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Tertiary Floating Action Button - Rectangle meduim |
<button
type="button"
className="bg-white h-[40px] w-[40px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center px-4 py-1.5
hover:bg-atom_snowred
focus-visible:outline focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Tertiary Floating Action Button - Rectangle large |
<button
type="button"
className="bg-white h-[50px] w-[50px] min-w-[30px] rounded tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center
px-4 py-1.5 hover:bg-atom_snowred focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Tertiary Floating Action Button - Circle small |
<button
type="button"
className="bg-white rounded-full h-[30px] w-[30px] min-w-[30px] tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center
px-4 py-1.5 hover:bg-atom_snowred focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Tertiary Floating Action Button - Circle meduim |
<button
type="button"
className="bg-white rounded-full h-[40px] w-[40px] min-w-[30px] tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center
px-4 py-1.5 hover:bg-atom_snowred focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
| |||||
| Red Tertiary Floating Action Button - Circle large |
<button
type="button"
className="bg-white rounded-full h-[50px] w-[50px] min-w-[30px] tracking-[unset]
text-atom_rojored leading-[6px] flex items-center justify-center
px-4 py-1.5 hover:bg-atom_snowred focus-visible:outline
focus-visible:outline-2 focus-visible:outline-atom_salmonpink
disabled:text-[#D7D7DC] font-medium text-sm"
>
<i className=" text-lg ri-shopping-cart-fill"></i>
</button>
|