Nuxeo Design Guidelines

Default Theme Buttons

Updated: May 10, 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

We'd love to hear your thoughts!

All fields required