# Buttons

There are multiple ways to style a button. Consistency is key.

{% @figma/embed fileId="U6YtlBWNBIrp4ou60L4U4K" nodeId="0:1" url="<https://www.figma.com/file/U6YtlBWNBIrp4ou60L4U4K/Buttons?node-id=0:1&t=zO7lRvhEMhHtLjvO-1>" %}

### Examples

| Before                                                                                                                                                                                                             | After                                                                                                                                                                                                              | Mistakes                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FmL9P5r4yGNnTSSskLnGf%2Fimage.png?alt=media\&token=ddeb816b-0ea1-4315-90bf-630be672aefb) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FNlxgTMSwQyO75WZHMzHw%2Fimage.png?alt=media\&token=18134cc3-1d71-4a6b-bc38-7a3cf2f0f4f3) | <ul><li>contrast</li><li>white space</li></ul>   |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FhQnKkmi28Z47cMejxgPy%2Fimage.png?alt=media\&token=fc7d2692-80a9-4c00-806a-8b75000addf4) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FCPBQHNuCqa8c7Wfy5UhZ%2Fimage.png?alt=media\&token=336d0f51-bfee-472c-b1d3-d97bdb51dc86) | <ul><li>white space</li><li>typography</li></ul> |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FgRgz8Qx0jXYBJOgDZYjA%2Fimage.png?alt=media\&token=cbccc2fa-3a80-47e0-b5cb-831194b67214) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FvS6EUMB9bR11jITxhZxN%2Fimage.png?alt=media\&token=abf62895-8574-43cf-9845-7bb54a055251) | <ul><li>nothing wrong here</li></ul>             |