Button
Props
| Prop | Type | Default | Required | |
|---|---|---|---|---|
| variant | "primary" | "secondary" | "tertiary" | "default" | "warning" | "default" | yes | style of the button |
| asChild | boolean | false | no | clones the child element |
| loading | boolean | false | no | sets the button to loading |
| square | boolean | false | no | makes the button square |
| className | string | "" | no | set additional classNames |
Additionally you can add every prop you would use with the default <button> element.
For example you can add an onClick handler:
<Button variant="default" onClick={() => doSth()}>Default</Button>Importing Button
import { Button } from "cerberusui"Variants
<Button variant="default">Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="warning">Warning</Button>asChild Prop
When using the asChild prop the child component will be cloned and the props of the button will be passed to it.
<Button variant="primary" asChild>
<a href="#">Primary</a>
</Button>Button States
Disabled
<Button variant="default" disabled>Default</Button>
<Button variant="primary" disabled>Primary</Button>
<Button variant="secondary" disabled>Secondary</Button>
<Button variant="tertiary" disabled>Tertiary</Button>
<Button variant="warning" disabled>Warning</Button>Loading
<Button variant="default" loading>Default</Button>
<Button variant="primary" loading>Primary</Button>
<Button variant="secondary" loading>Secondary</Button>
<Button variant="tertiary" loading>Tertiary</Button>
<Button variant="warning" loading>Warning</Button>Button With Icon
Icon at start
<Button variant="default"><icon />Default</Button>
<Button variant="primary"><icon />Primary</Button>
<Button variant="secondary"><icon />Secondary</Button>
<Button variant="tertiary"><icon />Tertiary</Button>
<Button variant="warning"><icon />Warning</Button>Icon at end
<Button variant="default">Default<icon /></Button>
<Button variant="primary">Primary<icon /></Button>
<Button variant="secondary">Secondary<icon /></Button>
<Button variant="tertiary">Tertiary<icon /></Button>
<Button variant="warning">Warning<icon /></Button>Square Button
<Button variant="default" square><icon /></Button>
<Button variant="primary" square><icon /></Button>
<Button variant="secondary" square><icon /></Button>
<Button variant="tertiary" square><icon /></Button>
<Button variant="warning" square><icon /></Button>Combination
<Button variant="primary" asChild loading>
<a href="#"><icon />Primary</a>
</Button>
<Button variant="primary" asChild loading square>
<a href="#"><icon /></a>
</Button>