Button
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!