Default Theme Buttons

Updated: June 28, 2021

Colors

Primary Button


:enabled	:hover	:focus	:active	:disabled

Status	Background-color	Text + Icon color
:enabled	Blue 60 — `#0066ff`	White — `#ffffff`
:hover	Blue 70 — `#0052cc`	White — `#ffffff`
:focus	Blue 60 — `#0066ff`	White — `#ffffff`
:active	Blue 80 — `#003d99`	White — `#ffffff`
:disabled	Gray 20 — `#e0e0e0`	Gray 30 — `#c6c6c6`

Secondary Button


:enabled	:hover	:focus	:active	:disabled

Status	Background-color	Text + Icon color	Border-color	Border-width
:enabled	`transparent`	Blue 60 — `#0066ff`	Blue 60 — `#0066ff`	1px
:hover	Blue 70 — `#0052cc`	White — `#ffffff`	N/A	1px
:focus	Blue 60 — `#0066ff`	White — `#ffffff`	Blue 60 — `#0066ff`	1px
:active	Blue 80 — `#003d99`	White — `#ffffff`	N/A	1px
:disabled	`transparent`	Gray 30 — `#c6c6c6`	Gray 20 — `#e0e0e0`	1px

Text Button


:enabled	:hover	:focus	:active	:disabled

Status	Background-color	Text + Icon color
:enabled	`transparent`	Blue 60 — `#0066ff`
:hover	Gray 20 — `#e0e0e0`	Blue 70 — `#0052cc`
:focus	`transparent`	Blue 60 — `#0066ff`
:active	Gray 30 — `#c6c6c6`	Blue 80 — `#003d99`
:disabled	`transparent`	Gray 30 — `#c6c6c6`