1.0.0-alpha.6 • Published 3 years ago

@evergreen-ui/core-button v1.0.0-alpha.6

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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

propNametypedefaultisRequired
childrenReactNodeYes (for icon variant only)
varianttext | contained | outlined | icon'text'No
sizestringsmall | large OR small | medium (icon variant)No
labelReactNode or never (icon variant)No