Button
Styled button component.
Installation
CLI
Add component to your project.
npx @perceptui/cli@latest add buttonImport from @perceptui/ui
Note: If you have installed @perceptui/ui package, then import Button
from @perceptui/ui.
import { Button } from "@perceptui/ui";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.
Solid Variant
Outline Variant
Ghost Variant
Color
Use the color prop to control the color of the button.
Color with solid variant
Color with outline variant
Color with ghost variant
There are more color properties. Take your time to explore
Radius
Use the radius prop to assign a specific radius value.
Size
Use the size prop to assign a specific size value.