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