Commit button style guide

Overview

The Boson Commit button has some default designs but it can be customised by changing the parameters in buttonStyle.

<div id="container"></div>

<script>
  const instance = CommitButton({
    /* ... */
    disabled: false,
    buttonStyle: {
      layout: "horizontal",
      minWidth: "100px",
      minHeight: "100px",
      shape: "rounded",
      color: "white"
    },
    /* ... */
  });

  instance.render("#container");
</script>

Layout

Set the buttonStyle.layout option to determine the button layout of the text and the Boson logo:

Value
Result

horizontal

vertical

Color

Set the buttonStyle.color option to one of these values:

Value
Result

green

black

white

Shape

Set the buttonStyle.shape option to one of these values:

Value
Result

sharp

rounded

pill

Size

Set the buttonStyle.minWidth and buttonStyle.minHeight:

Property
Value
Result

minWidth

500px

minHeight

80px

Last updated