Button
A clickable element that signifies that something will happen when it's interacted with.
Buttons are an incredibly frequently used UI component. Too often, people use
a button where a link would be appropriate, and a link where a button would be
appropriate. For this reason, it is prudent to provide the ability to render any
button style as a button or a link.
| Prop name | Type | Default | Description |
|---|---|---|---|
className | string | null | A custom className you would like to pass to the Component |
handleClick | func | null | The function to be called when the Button is clicked |
href | string | null | The href for Button to point to. Renders an anchor tag |
id | string | null | The HTML id for the button |
isDisabled | bool | false | Whether or not the Button is disabled |
isOutline | bool | false | Whether or not the Button should be outlined |
isRounded | bool | false | Whether or not to render a rounded button |
size | enum | 'md' | The size of Button to render |
type | enum | 'button' | The HTML type attribute for the button |
variant | enum | 'primary' | The color variant of the Button |
children | union | Required | Content of the Button |
Variants
A number of variants are provided for use. By default, a primary variant will
be returned, unless another is specified.
Primary
Secondary
Sizes
Disabled
Disabled buttons need to look different, too.