For cases where actions need to be de-emphasized, the tone can be set to neutral.This makes the button follow the default text colour, including inverting on dark surfaces to improve contrast.
This is the default tone for seekJobs and other non-legacy themes.
A Button cannot be disabled. This is a deliberate design decision to encourage more accessible patterns that inform the user about what is required to progress.For example, when designing a form, instead of disabling the submit button when a required field is missing, allow the user to attempt to submit and fail. Validation feedback can then be provided informing the user of what they must do to progress.
By default, a button has a neutral tone and uses the ghost variant, allowing the visual prominence to be increased or decreased as required.This enables colour to be applied as accents and with purpose, rather than by default — improving the management of user attention and supporting a more declarative hierarchy of actions.
Default is a neutral tone and ghost variant:
To compliment this, when a tone is purposefully applied to a button, the default variant becomes solid to maximise its impact — allowing the visual prominence to be reduced as needed.
Default variant becomes solid when a tone is applied:
As the approach to colour in our experiences has changed over time, so too has the default visual prominence for buttons. For this reason, older themes such as apac and seekBusiness continue to have the default tone of formAccent and a solid variant.
Historical default was the formAccent tone and solid variant:
The ghost, soft, and transparent variants automatically lighten their foreground colour to improve contrast against a dark background. To compliment this, the hover and active backgrounds remove the colour in favour of a white translucency.
Buttons with a neutral tone are inverted to improve contrast.
When using custom background colours or images on a Box component, this behaviour can be applied by setting the background to either customLight or customDark.
The bleed prop allows the background colour to bleed out into the surrounding layout — leaving the button to only take up the space required for the label itself.
The bleed is only applied vertically, with exception to the transparent variant, which also applies horizontally to facilitate better alignment with surrounding text.
For example, we can align a button to a Heading element using an Inline, even though the button is actually taller than the heading. If we didn’t use the bleed prop in this case, the button would introduce unwanted space above and below the heading.