Usage
This component contains a <button>
that can be used to submit a <form>
, either via the default action
attribute of the form element, or via a specific formaction
provided as props to the Button
component.
If a <form>
contains more than one Button
with different actions expected on click, each Button
must have a distinct formaction
attribute.
CSS Variables
The CSS variables for button colors reflect the combination of the following factors:
- Brightness: day, night
- Contrast: blend, contrast
- Element: Button, Toggle, Switch, Expand
- State: default, disabled, hover, focus, active
- Color: none, primary, accent, highlight
- Variant: fill, outline, bare
For each [Brightness x Contrast], an Element has to have styling rules for each State, given every combination of [Color x Variant]
The generation of CSS color variables and button mixins is still a work in progress. More to come soon!