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