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
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.