1.0.0-alpha.6 • Published 3 years ago
@evergreen-ui/core-button v1.0.0-alpha.6
Button
Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.
For text based buttons (text
| contained
| outlined
), you can use the label
or children
prop for the button's display.
For icon based buttons, you must specify a children
prop.
Usage
import { Button } from "@evergreen-ui/core";
const handleClick = event => console.log(event);
// Defaults to 'text' button
<Button label="Action" onClick={handleClick} />
<Button onClick={handleClick}>Action</Button>
<Button variant="outlined" onClick={handleClick}>Action</Button>
<Button variant="contained" onClick={handleClick}>Action</Button>
// Can use inherited Button props from MUI
<Button label="Action" type="submit" endIcon={<KeyboardArrowDown />} onClick={handleClick} />
<Button label="Action" type="submit" startIcon={<KeyboardArrowDown />} onClick={handleClick} />
// 'icon' button variant
<Button variant="icon" onClick={handleClick}><KeyboardArrowDown /></Button>
Properties
- Props are as provided under Button Props (Material UI)
propName | type | default | isRequired |
---|---|---|---|
children | ReactNode | Yes (for icon variant only) | |
variant | text | contained | outlined | icon | 'text' | No |
size | string | small | large OR small | medium (icon variant) | No |
label | ReactNode or never (icon variant) | No |
1.0.0-alpha.6
3 years ago
1.0.0-alpha.5
3 years ago
1.0.0-alpha.4
3 years ago
1.0.0-alpha.3
3 years ago
1.0.0-alpha.2
3 years ago
1.0.0-alpha.1
3 years ago
1.0.0-alpha.0
3 years ago
0.0.0
3 years ago