Solaris Design System

Buttons

Buttons are the most common used component. They allow users to complete multiple actions.

Types

Text text button types only have text. Text icon these include the icon on the left side of the text. Icon only no text is in these buttons.

Sizes

There are large, medium and small sizes of buttons. The tables below have the states and the button sizes.




Text buttons
States Large
Height: 48px
Padding: 14px 17px
 Medium
Height: 40px
Padding: 10px 13px		 Small
Height: 32px
Padding: 7px 10px
Primary solid
:passive		 Passive primary solid large button text theme light Passive primary solid large button text theme dark Passive primary solid medium button text theme light Passive primary solid medium button text theme dark Passive primary solid small button text theme light Passive primary solid small button text theme dark
:hover Hover primary solid large button text theme light Hover primary solid large button text theme dark Hover primary solid medium button text theme light Hover primary solid medium button text theme dark Hover primary solid small button text theme light Hover primary solid small button text theme dark
:active Active primary solid large button text theme light Active primary solid large button text theme dark Active primary solid medium button text theme light Active primary solid medium button text theme dark Active primary solid small button text theme light Active primary solid small button text theme dark
:focus Focus primary solid large button text theme light Focus primary solid large button text theme dark Focus primary solid medium button text theme light Focus primary solid medium button text theme dark Focus primary solid small button text theme light Focus primary solid small button text theme dark
:disabled Disabled primary solid large button text theme light Disabled primary solid large button text theme dark Disabled primary solid medium button text theme light Disabled primary solid medium button text theme dark Disabled primary solid small button text theme light Disabled primary solid small button text theme dark
:skeleton Skeleton primary solid large button text theme light Skeleton primary solid large button text theme dark Skeleton primary solid medium button text theme light Skeleton primary solid medium button text theme dark Skeleton primary solid small button text theme light Skeleton primary solid small button text theme dark
Secondary outline
:passive		 Passive secondary outline large button text theme light Passive secondary outline large button text theme dark Passive secondary outline medium button text theme light Passive secondary outline medium button text theme dark Passive secondary outline small button text theme light Passive secondary outline small button text theme dark
:hover Hover secondary outline large button text theme light Hover secondary outline large button text theme dark Hover secondary outline medium button text theme light Hover secondary outline medium button text theme dark Hover secondary outline small button text theme light Hover secondary outline small button text theme dark
:active Active secondary outline large button text theme light Active secondary outline large button text theme dark Active secondary outline medium button text theme light Active secondary outline medium button text theme dark Active secondary outline small button text theme light Active secondary outline small button text theme dark
:focus Focus secondary outline large button text theme light Focus secondary outline large button text theme dark Focus secondary outline medium button text theme light Focus secondary outline medium button text theme dark Focus secondary outline small button text theme light Focus secondary outline small button text theme dark
:disabled Disabled secondary outline large button text theme light Disabled secondary outline large button text theme dark Disabled secondary outline medium button text theme light Disabled secondary outline medium button text theme dark Disabled secondary outline small button text theme light Disabled secondary outline small button text theme dark
:skeleton Skeleton secondary outline large button text theme light Skeleton secondary outline large button text theme dark Skeleton secondary outline medium button text theme light Skeleton secondary outline medium button text theme dark Skeleton secondary outline small button text theme light Skeleton secondary outline small button text theme dark
Quiet
:passive		 Passive quiet large button text theme light Passive quiet large button text theme dark Passive quiet medium button text theme light Passive quiet medium button text theme dark Passive quiet small button text theme light Passive quiet small button text theme dark
:hover Hover quiet large button text theme light Hover quiet large button text theme dark Hover quiet medium button text theme light Hover quiet medium button text theme dark Hover quiet small button text theme light Hover quiet small button text theme dark
:active Active quiet large button text theme light Active quiet large button text theme dark Active quiet medium button text theme light Active quiet medium button text theme dark Active quiet small button text theme light Active quiet small button text theme dark
:focus Focus quiet large button text theme light Focus quiet large button text theme dark Focus quiet medium button text theme light Focus quiet medium button text theme dark Focus quiet small button text theme light Focus quiet small button text theme dark
:disabled Disabled quiet large button text theme light Disabled quiet large button text theme dark Disabled quiet medium button text theme light Disabled quiet medium button text theme dark Disabled quiet small button text theme light Disabled quiet small button text theme dark
:skeleton Skeleton quiet large button text theme light Skeleton quiet large button text theme dark Skeleton quiet medium button text theme light Skeleton quiet medium button text theme dark Skeleton quiet small button text theme light Skeleton quiet small button text theme dark
CTA
:passive		 passive cta large-shadow button text passive cta medium-shadow button text passive cta small-shadow button text
:hover hover cta large-shadow-large button text hover cta medium-shadow-large button text hover cta small-shadow-large button text
:active active cta large-shadow-large button text active cta medium-shadow-large button text active cta small-shadow-large button text
:focus focus cta large-shadow-large button text focus cta medium-shadow-large button text focus cta small-shadow-large button text
:disabled disabled cta large-shadow button text disabled cta medium-shadow button text disabled cta small-shadow button text
:skeleton skeleton cta large-shadow button text skeleton cta medium-shadow button text skeleton cta small-shadow button text
Text buttons variations
States Large
Height: 48px
Padding: 14px 17px
 Medium
Height: 40px
Padding: 10px 13px		 Small
Height: 32px
Padding: 7px 10px
Primary solid
:success		 success primary solid large button text success primary solid medium button text success primary solid small button text
:alert alert primary solid large button text alert primary solid medium button text alert primary solid small button text
:warning warning primary solid large button text warning primary solid medium button text warning primary solid small button text
:option-1 option-1 primary solid large button text option-1 primary solid medium button text option-1 primary solid small button text
:option-2 option-2 primary solid large button text option-2 primary solid medium button text option-2 primary solid small button text
:option-3 option-3 primary solid large button text option-3 primary solid medium button text option-3 primary solid small button text
:attention attention primary solid large button text attention primary solid medium button text attention primary solid small button text
:light light primary solid large button text light primary solid medium button text light primary solid small button text
Secondary outline
:success		 success secondary outline large button text theme light success secondary outline large button text theme dark success secondary outline medium button text theme light success secondary outline medium button text theme dark success secondary outline small button text theme light success secondary outline small button text theme dark
:alert alert secondary outline large button text theme light alert secondary outline large button text theme dark alert secondary outline medium button text theme light alert secondary outline medium button text theme dark alert secondary outline small button text theme light alert secondary outline small button text theme dark
:warning warning secondary outline large button text theme light warning secondary outline large button text theme dark warning secondary outline medium button text theme light warning secondary outline medium button text theme dark warning secondary outline small button text theme light warning secondary outline small button text theme dark
:option-1 option-1 secondary outline large button text theme light option-1 secondary outline large button text theme dark option-1 secondary outline medium button text theme light option-1 secondary outline medium button text theme dark option-1 secondary outline small button text theme light option-1 secondary outline small button text theme dark
:option-2 option-2 secondary outline large button text theme light option-2 secondary outline large button text theme dark option-2 secondary outline medium button text theme light option-2 secondary outline medium button text theme dark option-2 secondary outline small button text theme light option-2 secondary outline small button text theme dark
:option-3 option-3 secondary outline large button text theme light option-3 secondary outline large button text theme dark option-3 secondary outline medium button text theme light option-3 secondary outline medium button text theme dark option-3 secondary outline small button text theme light option-3 secondary outline small button text theme dark
:attention attention secondary outline large button text theme light attention secondary outline large button text theme dark attention secondary outline medium button text theme light attention secondary outline medium button text theme dark attention secondary outline small button text theme light attention secondary outline small button text theme dark
:light light secondary outline large button text theme light light secondary outline large button text theme dark light secondary outline medium button text theme light light secondary outline medium button text theme dark light secondary outline small button text theme light light secondary outline small button text theme dark
Quiet
:success		 success quiet large button text theme light success quiet large button text theme dark success quiet medium button text theme light success quiet medium button text theme dark success quiet small button text theme light success quiet small button text theme dark
:alert alert quiet large button text theme light alert quiet large button text theme dark alert quiet medium button text theme light alert quiet medium button text theme dark alert quiet small button text theme light alert quiet small button text theme dark
:warning warning quiet large button text theme light warning quiet large button text theme dark warning quiet medium button text theme light warning quiet medium button text theme dark warning quiet small button text theme light warning quiet small button text theme dark
:option-1 option-1 quiet large button text theme light option-1 quiet large button text theme dark option-1 quiet medium button text theme light option-1 quiet medium button text theme dark option-1 quiet small button text theme light option-1 quiet small button text theme dark
:option-2 option-2 quiet large button text theme light option-2 quiet large button text theme dark option-2 quiet medium button text theme light option-2 quiet medium button text theme dark option-2 quiet small button text theme light option-2 quiet small button text theme dark
:option-3 option-3 quiet large button text theme light option-3 quiet large button text theme dark option-3 quiet medium button text theme light option-3 quiet medium button text theme dark option-3 quiet small button text theme light option-3 quiet small button text theme dark
:attention attention quiet large button text theme light attention quiet large button text theme dark attention quiet medium button text theme light attention quiet medium button text theme dark attention quiet small button text theme light attention quiet small button text theme dark
CTA
:flare		 flare cta large-shadow button text flare cta medium-shadow button text flare cta small-shadow button text
:horizon horizon cta large-shadow button text horizon cta medium-shadow button text horizon cta small-shadow button text
:gravity gravity cta large-shadow button text gravity cta medium-shadow button text gravity cta small-shadow button text
:aurora aurora cta large-shadow button text aurora cta medium-shadow button text aurora cta small-shadow button text
:nebula nebula cta large-shadow button text nebula cta medium-shadow button text nebula cta small-shadow button text
:galaxy galaxy cta large-shadow button text galaxy cta medium-shadow button text galaxy cta small-shadow button text




Text icon buttons
States Large
Height: 48px
Padding: 14px 17px
 Medium
Height: 40px
Padding: 10px 13px		 Small
Height: 32px
Padding: 7px 10px
Primary solid
:passive		 Passive primary solid large button text-icon theme light Passive primary solid large button text-icon theme dark Passive primary solid medium button text-icon theme light Passive primary solid medium button text-icon theme dark Passive primary solid small button text-icon theme light Passive primary solid small button text-icon theme dark
:hover Hover primary solid large button text-icon theme light Hover primary solid large button text-icon theme dark Hover primary solid medium button text-icon theme light Hover primary solid medium button text-icon theme dark Hover primary solid small button text-icon theme light Hover primary solid small button text-icon theme dark
:active Active primary solid large button text-icon theme light Active primary solid large button text-icon theme dark Active primary solid medium button text-icon theme light Active primary solid medium button text-icon theme dark Active primary solid small button text-icon theme light Active primary solid small button text-icon theme dark
:focus Focus primary solid large button text-icon theme light Focus primary solid large button text-icon theme dark Focus primary solid medium button text-icon theme light Focus primary solid medium button text-icon theme dark Focus primary solid small button text-icon theme light Focus primary solid small button text-icon theme dark
:disabled Disabled primary solid large button text-icon theme light Disabled primary solid large button text-icon theme dark Disabled primary solid medium button text-icon theme light Disabled primary solid medium button text-icon theme dark Disabled primary solid small button text-icon theme light Disabled primary solid small button text-icon theme dark
:skeleton Skeleton primary solid large button text-icon theme light Skeleton primary solid large button text-icon theme dark Skeleton primary solid medium button text-icon theme light Skeleton primary solid medium button text-icon theme dark Skeleton primary solid small button text-icon theme light Skeleton primary solid small button text-icon theme dark
Secondary outline
:passive		 Passive secondary outline large button text-icon theme light Passive secondary outline large button text-icon theme dark Passive secondary outline medium button text-icon theme light Passive secondary outline medium button text-icon theme dark Passive secondary outline small button text-icon theme light Passive secondary outline small button text-icon theme dark
:hover Hover secondary outline large button text-icon theme light Hover secondary outline large button text-icon theme dark Hover secondary outline medium button text-icon theme light Hover secondary outline medium button text-icon theme dark Hover secondary outline small button text-icon theme light Hover secondary outline small button text-icon theme dark
:active Active secondary outline large button text-icon theme light Active secondary outline large button text-icon theme dark Active secondary outline medium button text-icon theme light Active secondary outline medium button text-icon theme dark Active secondary outline small button text-icon theme light Active secondary outline small button text-icon theme dark
:focus Focus secondary outline large button text-icon theme light Focus secondary outline large button text-icon theme dark Focus secondary outline medium button text-icon theme light Focus secondary outline medium button text-icon theme dark Focus secondary outline small button text-icon theme light Focus secondary outline small button text-icon theme dark
:disabled Disabled secondary outline large button text-icon theme light Disabled secondary outline large button text-icon theme dark Disabled secondary outline medium button text-icon theme light Disabled secondary outline medium button text-icon theme dark Disabled secondary outline small button text-icon theme light Disabled secondary outline small button text-icon theme dark
:skeleton Skeleton secondary outline large button text-icon theme light Skeleton secondary outline large button text-icon theme dark Skeleton secondary outline medium button text-icon theme light Skeleton secondary outline medium button text-icon theme dark Skeleton secondary outline small button text-icon theme light Skeleton secondary outline small button text-icon theme dark
Quiet
:passive		 Passive quiet large button text-icon theme light Passive quiet large button text-icon theme dark Passive quiet medium button text-icon theme light Passive quiet medium button text-icon theme dark Passive quiet small button text-icon theme light Passive quiet small button text-icon theme dark
:hover Hover quiet large button text-icon theme light Hover quiet large button text-icon theme dark Hover quiet medium button text-icon theme light Hover quiet medium button text-icon theme dark Hover quiet small button text-icon theme light Hover quiet small button text-icon theme dark
:active Active quiet large button text-icon theme light Active quiet large button text-icon theme dark Active quiet medium button text-icon theme light Active quiet medium button text-icon theme dark Active quiet small button text-icon theme light Active quiet small button text-icon theme dark
:focus Focus quiet large button text-icon theme light Focus quiet large button text-icon theme dark Focus quiet medium button text-icon theme light Focus quiet medium button text-icon theme dark Focus quiet small button text-icon theme light Focus quiet small button text-icon theme dark
:disabled Disabled quiet large button text-icon theme light Disabled quiet large button text-icon theme dark Disabled quiet medium button text-icon theme light Disabled quiet medium button text-icon theme dark Disabled quiet small button text-icon theme light Disabled quiet small button text-icon theme dark
:skeleton Skeleton quiet large button text-icon theme light Skeleton quiet large button text-icon theme dark Skeleton quiet medium button text-icon theme light Skeleton quiet medium button text-icon theme dark Skeleton quiet small button text-icon theme light Skeleton quiet small button text-icon theme dark
CTA
:passive		 passive cta large-shadow button text-icon passive cta medium-shadow button text-icon passive cta small-shadow button text-icon
:hover hover cta large-shadow button text-icon hover cta medium-shadow button text-icon hover cta small-shadow button text-icon
:active active cta large-shadow-large button text-icon active cta medium-shadow-large button text-icon active cta small-shadow-large button text-icon
:focus focus cta large-shadow-large button text-icon focus cta medium-shadow-large button text-icon focus cta small-shadow-large button text-icon
:disabled disabled cta large-shadow button text-icon disabled cta medium-shadow button text-icon disabled cta small-shadow button text-icon
:skeleton skeleton cta large-shadow button text-icon skeleton cta medium-shadow button text-icon skeleton cta small-shadow button text-icon




Text icon buttons variations
States Large
Height: 48px
Padding: 14px 17px
 Medium
Height: 40px
Padding: 10px 13px		 Small
Height: 32px
Padding: 7px 10px
Primary solid
:success		 success primary solid large button text-icon success primary solid medium button text-icon success primary solid small button text-icon
:alert alert primary solid large button text-icon alert primary solid medium button text-icon alert primary solid small button text-icon
:warning warning primary solid large button text-icon warning primary solid medium button text-icon warning primary solid small button text-icon
:option-1 option-1 primary solid large button text-icon option-1 primary solid medium button text-icon option-1 primary solid small button text-icon
:option-2 option-2 primary solid large button text-icon option-2 primary solid medium button text-icon option-2 primary solid small button text-icon
:option-3 option-3 primary solid large button text-icon option-3 primary solid medium button text-icon option-3 primary solid small button text-icon
:attention attention primary solid large button text-icon attention primary solid medium button text-icon attention primary solid small button text-icon
:light light primary solid large button text-icon theme light light primary solid large button text-icon theme dark light primary solid medium button text-icon theme light light primary solid medium button text-icon theme dark light primary solid small button text-icon theme light light primary solid small button text-icon theme dark
Secondary outline
:success		 success secondary outline large button text-icon theme light success secondary outline large button text-icon theme dark success secondary outline medium button text-icon theme light success secondary outline medium button text-icon theme dark success secondary outline small button text-icon theme light success secondary outline small button text-icon theme dark
:alert alert secondary outline large button text-icon theme light alert secondary outline large button text-icon theme dark alert secondary outline medium button text-icon theme light alert secondary outline medium button text-icon theme dark alert secondary outline small button text-icon theme light alert secondary outline small button text-icon theme dark
:warning warning secondary outline large button text-icon theme light warning secondary outline large button text-icon theme dark warning secondary outline medium button text-icon theme light warning secondary outline medium button text-icon theme dark warning secondary outline small button text-icon theme light warning secondary outline small button text-icon theme dark
:option-1 option-1 secondary outline large button text-icon theme light option-1 secondary outline large button text-icon theme dark option-1 secondary outline medium button text-icon theme light option-1 secondary outline medium button text-icon theme dark option-1 secondary outline small button text-icon theme light option-1 secondary outline small button text-icon theme dark
:option-2 option-2 secondary outline large button text-icon theme light option-2 secondary outline large button text-icon theme dark option-2 secondary outline medium button text-icon theme light option-2 secondary outline medium button text-icon theme dark option-2 secondary outline small button text-icon theme light option-2 secondary outline small button text-icon theme dark
:option-3 option-3 secondary outline large button text-icon theme light option-3 secondary outline large button text-icon theme dark option-3 secondary outline medium button text-icon theme light option-3 secondary outline medium button text-icon theme dark option-3 secondary outline small button text-icon theme light option-3 secondary outline small button text-icon theme dark
:attention attention secondary outline large button text-icon theme light attention secondary outline large button text-icon theme dark attention secondary outline medium button text-icon theme light attention secondary outline medium button text-icon theme dark attention secondary outline small button text-icon theme light attention secondary outline small button text-icon theme dark
:light light secondary outline large button text-icon theme light light secondary outline large button text-icon theme dark light secondary outline medium button text-icon theme light light secondary outline medium button text-icon theme dark light secondary outline small button text-icon theme light light secondary outline small button text-icon theme dark
Quiet
:success		 success quiet large button text-icon success quiet medium button text-icon success quiet small button text-icon
:alert alert quiet large button text-icon alert quiet medium button text-icon alert quiet small button text-icon
:warning warning quiet large button text-icon warning quiet medium button text-icon warning quiet small button text-icon
:option-1 option-1 quiet large button text-icon option-1 quiet medium button text-icon option-1 quiet small button text-icon
:option-2 option-2 quiet large button text-icon option-2 quiet medium button text-icon option-2 quiet small button text-icon
:option-3 option-3 quiet large button text-icon option-3 quiet medium button text-icon option-3 quiet small button text-icon
:attention attention quiet large button text-icon attention quiet medium button text-icon attention quiet small button text-icon
CTA
:flare		 flare cta large-shadow-large button text-icon flare cta medium-shadow-large button text-icon flare cta small-shadow-large button text-icon
:horizon horizon cta large-shadow-large button text-icon horizon cta medium-shadow-large button text-icon horizon cta small-shadow-large button text-icon
:gravity gravity cta large-shadow-large button text-icon gravity cta medium-shadow-large button text-icon gravity cta small-shadow-large button text-icon
:aurora aurora cta large-shadow-large button text-icon aurora cta medium-shadow-large button text-icon aurora cta small-shadow-large button text-icon
:nebula nebula cta large-shadow-large button text-icon nebula cta medium-shadow-large button text-icon nebula cta small-shadow-large button text-icon
:galaxy galaxy cta large-shadow-large button text-icon galaxy cta medium-shadow-large button text-icon galaxy cta small-shadow-large button text-icon
Icon only buttons
States Large
Height: 48px
Padding: 14px 17px
 Medium
Height: 40px
Padding: 10px 13px		 Small
Height: 32px
Padding: 7px 10px
Primary solid
:passive		 Passive primary solid large button icon theme light Passive primary solid large button icon theme dark Passive primary solid medium button icon theme light Passive primary solid medium button icon theme dark Passive primary solid small button icon theme light Passive primary solid small button icon theme dark
:hover Hover primary solid large button icon theme light Hover primary solid large button icon theme dark Hover primary solid medium button icon theme light Hover primary solid medium button icon theme dark Hover primary solid small button icon theme light Hover primary solid small button icon theme dark
:active Active primary solid large button icon theme light Active primary solid large button icon theme dark Active primary solid medium button icon theme light Active primary solid medium button icon theme dark Active primary solid small button icon theme light Active primary solid small button icon theme dark
:focus Focus primary solid large button icon theme light Focus primary solid large button icon theme dark Focus primary solid medium button icon theme light Focus primary solid medium button icon theme dark Focus primary solid small button icon theme light Focus primary solid small button icon theme dark
:disabled Disabled primary solid large button icon theme light Disabled primary solid large button icon theme dark Disabled primary solid medium button icon theme light Disabled primary solid medium button icon theme dark Disabled primary solid small button icon theme light Disabled primary solid small button icon theme dark
:skeleton Skeleton primary solid large button icon theme light Skeleton primary solid large button icon theme dark Skeleton primary solid medium button icon theme light Skeleton primary solid medium button icon theme dark Skeleton primary solid small button icon theme light Skeleton primary solid small button icon theme dark
Secondary outline
:passive		 Passive secondary outline large button icon theme light Passive secondary outline large button icon theme dark Passive secondary outline medium button icon theme light Passive secondary outline medium button icon theme dark Passive secondary outline small button icon theme light Passive secondary outline small button icon theme dark
:hover Hover secondary outline large button icon theme light Hover secondary outline large button icon theme dark Hover secondary outline medium button icon theme light Hover secondary outline medium button icon theme dark Hover secondary outline small button icon theme light Hover secondary outline small button icon theme dark
:active Active secondary outline large button icon theme light Active secondary outline large button icon theme dark Active secondary outline medium button icon theme light Active secondary outline medium button icon theme dark Active secondary outline small button icon theme light Active secondary outline small button icon theme dark
:focus Focus secondary outline large button icon theme light Focus secondary outline large button icon theme dark Focus secondary outline medium button icon theme light Focus secondary outline medium button icon theme dark Focus secondary outline small button icon theme light Focus secondary outline small button icon theme dark
:disabled Disabled secondary outline large button icon theme light Disabled secondary outline large button icon theme dark Disabled secondary outline medium button icon theme light Disabled secondary outline medium button icon theme dark Disabled secondary outline small button icon theme light Disabled secondary outline small button icon theme dark
:skeleton Skeleton secondary outline large button icon theme light Skeleton secondary outline large button icon theme dark Skeleton secondary outline medium button icon theme light Skeleton secondary outline medium button icon theme dark Skeleton secondary outline small button icon theme light Skeleton secondary outline small button icon theme dark
Quiet
:passive		 Passive quiet large button icon theme light Passive quiet large button icon theme dark Passive quiet medium button icon theme light Passive quiet medium button icon theme dark Passive quiet small button icon theme light Passive quiet small button icon theme dark
:hover Hover quiet large button icon theme light Hover quiet large button icon theme dark Hover quiet medium button icon theme light Hover quiet medium button icon theme dark Hover quiet small button icon theme light Hover quiet small button icon theme dark
:active Active quiet large button icon theme light Active quiet large button icon theme dark Active quiet medium button icon theme light Active quiet medium button icon theme dark Active quiet small button icon theme light Active quiet small button icon theme dark
:focus Focus quiet large button icon theme light Focus quiet large button icon theme dark Focus quiet medium button icon theme light Focus quiet medium button icon theme dark Focus quiet small button icon theme light Focus quiet small button icon theme dark
:disabled Disabled quiet large button icon theme light Disabled quiet large button icon theme dark Disabled quiet medium button icon theme light Disabled quiet medium button icon theme dark Disabled quiet small button icon theme light Disabled quiet small button icon theme dark
:skeleton Skeleton quiet large button icon theme light Skeleton quiet large button icon theme dark Skeleton quiet medium button icon theme light Skeleton quiet medium button icon theme dark Skeleton quiet small button icon theme light Skeleton quiet small button icon theme dark
CTA
:passive		 passive cta large-shadow button icon passive cta medium-shadow button icon passive cta small-shadow button icon
:hover hover cta large-shadow button icon hover cta medium-shadow button icon hover cta small-shadow button icon
:active active cta large-shadow button icon active cta medium-shadow button icon active cta small-shadow button icon
:focus focus cta large-shadow button icon focus cta medium-shadow button icon focus cta small-shadow button icon
:disabled disabled cta large-shadow button icon disabled cta medium-shadow button icon disabled cta small-shadow button icon
:skeleton skeleton cta large-shadow button icon skeleton cta medium-shadow button icon skeleton cta small-shadow button icon




Icon only buttons variations
States Large
Height: 48px
Padding: 14px 17px
 Medium
Height: 40px
Padding: 10px 13px		 Small
Height: 32px
Padding: 7px 10px
Primary solid
:success		 success primary solid large button icon success primary solid medium button icon success primary solid small button icon
:alert alert primary solid large button icon alert primary solid medium button icon alert primary solid small button icon
:warning warning primary solid large button icon warning primary solid medium button icon warning primary solid small button icon
:option-1 option-1 primary solid large button icon option-1 primary solid medium button icon option-1 primary solid small button icon
:option-2 option-2 primary solid large button icon option-2 primary solid medium button icon option-2 primary solid small button icon
:option-3 option-3 primary solid large button icon option-3 primary solid medium button icon option-3 primary solid small button icon
:attention attention primary solid large button icon attention primary solid medium button icon attention primary solid small button icon
:light light primary solid large button icon theme light light primary solid large button icon theme dark light primary solid medium button icon theme light light primary solid medium button icon theme dark light primary solid small button icon theme light light primary solid small button icon theme dark
Secondary outline
:success		 success secondary outline large button icon theme light success secondary outline large button icon theme dark success secondary outline medium button icon theme light success secondary outline medium button icon theme dark success secondary outline small button icon theme light success secondary outline small button icon theme dark
:alert alert secondary outline large button icon theme light alert secondary outline large button icon theme dark alert secondary outline medium button icon theme light alert secondary outline medium button icon theme dark alert secondary outline small button icon theme light alert secondary outline small button icon theme dark
:warning warning secondary outline large button icon theme light warning secondary outline large button icon theme dark warning secondary outline medium button icon theme light warning secondary outline medium button icon theme dark warning secondary outline small button icon theme light warning secondary outline small button icon theme dark
:option-1 option-1 secondary outline large button icon theme light option-1 secondary outline large button icon theme dark option-1 secondary outline medium button icon theme light option-1 secondary outline medium button icon theme dark option-1 secondary outline small button icon theme light option-1 secondary outline small button icon theme dark
:option-2 option-2 secondary outline large button icon theme light option-2 secondary outline large button icon theme dark option-2 secondary outline medium button icon theme light option-2 secondary outline medium button icon theme dark option-2 secondary outline small button icon theme light option-2 secondary outline small button icon theme dark
:option-3 option-3 secondary outline large button icon theme light option-3 secondary outline large button icon theme dark option-3 secondary outline medium button icon theme light option-3 secondary outline medium button icon theme dark option-3 secondary outline small button icon theme light option-3 secondary outline small button icon theme dark
:attention attention secondary outline large button icon theme light attention secondary outline large button icon theme dark attention secondary outline medium button icon theme light attention secondary outline medium button icon theme dark attention secondary outline small button icon theme light attention secondary outline small button icon theme dark
:light light secondary outline large button icon theme light light secondary outline large button icon theme dark light secondary outline medium button icon theme light light secondary outline medium button icon theme dark light secondary outline small button icon theme light light secondary outline small button icon theme dark
Quiet
:success		 success quiet large button icon success quiet medium button icon success quiet small button icon
:alert alert quiet large button icon alert quiet medium button icon alert quiet small button icon
:warning warning quiet large button icon warning quiet medium button icon warning quiet small button icon
:option-1 option-1 quiet large button icon option-1 quiet medium button icon option-1 quiet small button icon
:option-2 option-2 quiet large button icon option-2 quiet medium button icon option-2 quiet small button icon
:option-3 option-3 quiet large button icon option-3 quiet medium button icon option-3 quiet small button icon
:attention attention quiet large button icon attention quiet medium button icon attention quiet small button icon
CTA
:flare		 flare cta large-shadow button icon flare cta medium-shadow button icon flare cta small-shadow button icon
:horizon horizon cta large-shadow button icon horizon cta medium-shadow button icon horizon cta small-shadow button icon
:gravity gravity cta large-shadow button icon gravity cta medium-shadow button icon gravity cta small-shadow button icon
:aurora aurora cta large-shadow button icon aurora cta medium-shadow button icon aurora cta small-shadow button icon
:nebula nebula cta large-shadow button icon nebula cta medium-shadow button icon nebula cta small-shadow button icon
:galaxy galaxy cta large-shadow button icon galaxy cta medium-shadow button icon galaxy cta small-shadow button icon

Usage

Buttons are clickable elements that trigger actions. They are used for calls to action to the user and allow users to interact with pages. The labels of the buttons express what action will happen when the user clicks on it.

When to use

Use buttons to communicate actions users can take and to allow users to interact with the page. There should be one primary button, and any remaining calls to action should be represented as secondary or other variant buttons.

When not to use

Do not use buttons as navigational elements. Instead, use links when you want to take the user to a new page.

Type Use
Primary Used for main call to action. Where you want to emphasise the action and have the user click on it to complete the next step.
Secondary Used for secondary actions, often next to primary button.
Quiet These are also known as btn--text, where a button does not need much attention from the user but is there for possible steps.
CTA Call to action buttons are used when you want to catch the user’s eye and accomplish the next step that will lead to success.
Success Buttons that represents any successful action.
Alert Alerts the user of the possible outcome of their action upon clicking on the button, but non-desctructive outcomes.
Warning Actions that could have destructive effects or outcomes. Such as deleting or removing.