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.
A solid button with a neutral tone will also be 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.