# Commit button style guide

### Overview <a href="#overview" id="overview"></a>

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

```html
<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 <a href="#layout" id="layout"></a>

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

<table><thead><tr><th width="150">Value</th><th valign="top">Result</th></tr></thead><tbody><tr><td><code>horizontal</code></td><td valign="top"><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/fXgzNUWAzPe7p0dVVdcR/image.png" alt="" data-size="original"></td></tr><tr><td><code>vertical</code></td><td valign="top"><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/XwBGtp2NG0SYNZgDu6DV/image.png" alt="" data-size="original"></td></tr></tbody></table>

#### Color <a href="#color" id="color"></a>

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

<table><thead><tr><th width="150">Value</th><th>Result</th></tr></thead><tbody><tr><td><code>green</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/9oTOVPGX2AbY4o4o1H0u/image.png" alt="" data-size="original"></td></tr><tr><td><code>black</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/YFwH6YtDkCOD2mzJJQnf/image.png" alt="" data-size="original"></td></tr><tr><td><code>white</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/8tTJhVrxYKQyfwqMMr8n/image.png" alt="" data-size="original"></td></tr></tbody></table>

#### Shape <a href="#shape" id="shape"></a>

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

<table><thead><tr><th width="150">Value</th><th>Result</th></tr></thead><tbody><tr><td><code>sharp</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/KIfesMF6ZthlnDXU5mbk/image.png" alt="" data-size="original"></td></tr><tr><td><code>rounded</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/kq2WHjGhcX06VXuigHfQ/image.png" alt="" data-size="original"></td></tr><tr><td><code>pill</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/ccDJzim5Qrgg9uXXNrYQ/image.png" alt="" data-size="original"></td></tr></tbody></table>

#### Size <a href="#size" id="size"></a>

Set the `buttonStyle.minWidth` and `buttonStyle.minHeight`:

<table><thead><tr><th width="150">Property</th><th width="149.5">Value</th><th>Result</th></tr></thead><tbody><tr><td><code>minWidth</code></td><td><code>500px</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/MCEqCcvzqprQSqlTpKYO/image.png" alt="" data-size="original"></td></tr><tr><td><code>minHeight</code></td><td><code>80px</code></td><td><img src="https://content.gitbook.com/content/3XYfLjsIhVySLWYoIR4E/blobs/4tpbzhOHUXfETaFh4euE/image.png" alt="" data-size="original"></td></tr></tbody></table>