start
installationbutton
Basic usage
import {Button} from "tuix-design"copy
<Button>primary</Button>
<Button variant="secondary">secondary</Button>
<Button variant="success">success</Button>
<Button variant="warning">warning</Button>
<Button variant="danger">danger</Button>copy
<Button icon={<Icon name="Home" color="#fff" />}>primary</Button>copy
Size
<Button size="sm" icon={<Icon size={16} name="Home" color="#fff" />}>
small
</Button>
<Button icon={<Icon name="Home" color="#fff" />}>medium</Button>
<Button size="lg" icon={<Icon name="Home" color="#fff" />}>
large
</Button>copy
Disabled
<Button disabled>disable</Button>copy
Bordered
<Button bordered>bordered</Button>copy
Rounded
<Button rounded icon={<Icon name="Home" color="#fff" />}></Button>copy
API
| props | type | status | default | description |
|---|---|---|---|---|
| variant | primary | secondary | success | warning | danger | optional | primary | Button's variant |
| size | sm | md | lg | optional | md | Button's height |
| bordered | boolean | optional | false | Button's border status |
| desabled | boolean | optional | false | Button's diable status |
| rounded | boolean | optional | false | rounded button |
| icon | ReactNode | optional | null | Button's icon |
| onClick | ()=>void | optional | none | Button's onClick event |
basicicon buttonsizedisabledborderedroundedapi