Button
Styled button component.
Start using via importing:
import { Button } from "@perceptui/ui";<Button>Button</Button>API References
| Prop | Type | Description | Default |
|---|---|---|---|
| variant | "solid" | "outline" | "ghost" | Form of the Button | solid |
| color | string | Color of the Button | blue |
| radius | "none"|"sm"|"md"|"lg"|"xl"|"full" | Radius of the Button | sm |
| size | "xs"|"sm"|"md"|"lg"|"xl" | Size of the Button | sm |
| className | string | className | _ |
Examples
Variant
Use the variant prop to control the visual style of the button.
<Button variant="solid">Button</Button><Button variant="outline">Button</Button><Button variant="ghost">Button</Button>Color
Use the color prop to control the color of the button.
<Button color="blue">Button</Button><Button color="emerald">Button</Button><Button color="gray">Button</Button><Button color="rose">Button</Button><Button color="cyan">Button</Button><Button color="yellow">Button</Button>There are more color properties. Take your time to explore
Radius
Use the radius prop to assign a specific radius value.
<Button radius="none">Button</Button><Button radius="sm">Button</Button><Button radius="md">Button</Button><Button radius="lg">Button</Button><Button radius="xl">Button</Button><Button radius="full">Button</Button>Size
Use the size prop to assign a specific size value.
<Button size="xs">Button</Button><Button size="sm">Button</Button><Button size="md">Button</Button><Button size="lg">Button</Button><Button size="xl">Button</Button>