README
VTEX Components Button
Elementary accessible button component that can be reused by all VTEX Styleguides. You can use reakit full features (except the 'as' prop) and theme-ui's sx. It renders a button element by default.
This is a styled base component, so any Styleguide can theme it. You may configure your
components.button
property of the theme object (check the theming section).
Install
yarn add @vtex-components/button
or
npm install @vtex-components/button
Usage
import Button from '@vtex-components/button'
function UseCase() {
return <Button>VTEX Components Button</Button>
}
🎨 Theming
Modifier | Description |
---|---|
styles | base styles |
variant | button variants |
size | measures in general |
Example
You can define the theme with:
const theme = {
components: {
button: {
styles: {
':focus': {
outline: 'none',
boxShadow: '0px 0px 1px 0px solid #cecece'
}
},
variant: {
primary: {
bg: 'primary',
color: 'white',
},
secondary: {
bg: 'secondary',
color: 'black',
},
},
size: {
small: {
paddingY: 1
paddingX: 2
},
regular: {
paddingY: 2
paddingX: 3
},
},
},
},
}
Then use the Button:
<Button variant="primary" size="small">
Small Primary Button
</Button>