• GitHub icon
  • 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]

    Resources