Button

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

<Flex alignItems={"center"}> <Button icon="Send" mr={3}> Send </Button> <Button icon="Send" iconpos="right" mr={3}> Send </Button> <Button icon="MoreHoriz" icononly /> </Flex>

<Flex alignItems={"center"}>
  <Button icon="Send" mr={3}>
    Send
  </Button>

  <Button icon="Send" iconpos="right" mr={3}>
    Send
  </Button>

  <Button icon="MoreHoriz" icononly />
</Flex>

Result

Loading...

Props

Prop	Type	Default	Description
bg	string (optional)	'silver'
border	string (optional)	'none'
color	string (optional)	'white'
contrastColor	string (optional)	'white'	Sets text color of button.
fontFamily	string (optional)	'sansSerif'	Sets font of button text.
fontSize	string (optional)	'inherit'	Sets font size.
fontWeight	integer (optional)	3	Sets font weight.
height	string (optional)	'3rem'
icon	string (optional)		Sets icon of button.
icononly	bool (optional)	false	Sets padding on button with icon and no text
iconpos	enum (optional)		Sets icon position on button. Allowed values: 'left' 'right'.
lineHeight	integer (optional)	1
mainColor	string (optional)	'primary'	Sets background color of button.
minWidth	string (optional)	'3rem'
position	string (optional)	'relative'
px	integer (optional)	4
py	integer (optional)	0
size	enum (optional)		Sets font and spacing size of button. Allowed values: 'small' 'medium' 'large'.
theme	object (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.