Skip to main content


Use the Button component when you want users to perform an action. It contains a label with an optional icon before or after the label. It maps to a <button> element and extends Box.

Usage Example

Live Editor


bgstring (optional)'silver'
borderstring (optional)'none'
colorstring (optional)'white'
contrastColorstring (optional)'white'Sets text color of button.
fontFamilystring (optional)'sansSerif'Sets font of button text.
fontSizestring (optional)'inherit'Sets font size.
fontWeightinteger (optional)3Sets font weight.
heightstring (optional)'3rem'
iconstring (optional)Sets icon of button.
icononlybool (optional)falseSets padding on button with icon and no text
iconposenum (optional)Sets icon position on button. Allowed values: 'left' 'right'.
lineHeightinteger (optional)1
mainColorstring (optional)'primary'Sets background color of button.
minWidthstring (optional)'3rem'
positionstring (optional)'relative'
pxinteger (optional)4
pyinteger (optional)0
sizeenum (optional)Sets font and spacing size of button. Allowed values: 'small' 'medium' 'large'.
themeobject (optional)Sets theme.

size enum (optional) Sets font and spacing size of button Allowed values: 'small' 'medium' 'large' .

theme object (optional) Sets theme

Styled System Props

Button uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.