Emotion button components
64 buttons are styled using Emotion. A button is a clickable interactive element that triggers a response. You can place text and icons inside of a button. Buttons are often used for form submissions and to toggle elements into view. Emotion is a styling library that allows you to write styles in JavaScript. This technique is known as CSS-in-JS. When you write CSS alongside your JavaScript component files, you’re naturally encouraged to scope styling at the component level. Emotion is used to style 14 projects.
64components397storiesLast updated 8 days ago
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa8fe/thumb/capture-5a466654.png)
ButtonGroup
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa921/thumb/capture-697ba59c.png)
IconButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa94f/thumb/capture-d4048f16.png)
IconTextButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa8d5/thumb/capture-c733634f.png)
Button
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa8ed/thumb/capture-d1acb845.png)
ColoredButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa93e/thumb/capture-136cd556.png)
ColoredIconButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa96a/thumb/capture-ae759327.png)
ColoredIconTextButton
![](https://snapshots.chromatic.com/snapshots/62a1019d9a79db795e8b801b-62a101cf75866695214e2dc3/w_680/capture.png)
Button
![](https://snapshots.chromatic.com/snapshots/629fbea79ef814003ac09fb9-629fbed92d22f7004a72598c/w_680/capture.png)
Button
![](https://snapshots.chromatic.com/snapshots/629e648426469d004a80276e-629e64bc4b5e65004a07355c/w_680/capture.png)
Button
![](https://snapshots.chromatic.com/snapshots/629d137f5ac08100428903a7-63c1aa6feed1a8f036a56f05/w_680/capture.png)
Button