Skip to content
Theme UI Gallery
View Source
View Theme
Made by @gill_kyle


Examples of combining @theme-ui/components to create and style buttons.

Numeric Label

A side by side button alongside a NavLink to another location.


Icon Button

Theme UI includes an IconButton component.

Labeled Buttons

SVG elements can be used inside other elements and styled with the sx prop as well.

Theme Editor

Editing your theme will update all elements styled on the page by Theme UI.
Font Sizes
Font Weights
Line Heights
Color Mode
Space is used by margin, padding, and CSS grid gaps.
Edit the Theme to see changes!