Buttons
This is a simple buttons styles
Import
import { Button } from "cui-react";
Usage
Basic Example
Render a basic button:
Visual:
Code:
<Button text="Click me" color="primary" onClick={() => alert('Button clicked!')} />
Customizing
You can customize the button using the following props:
- text (required): The text displayed on the button.
- onClick (optional): Function triggered when the button is clicked.
- size (optional): Size of the button (small, medium, large, full). Defaults to medium.
- color (optional): Color variant of the button (primary, secondary, danger, plate). Defaults to primary.
<Button text="Send" color="secondary" size="small" />
In this example, the button will have a secondary color variant and a small size.
Props
text
- Type: string
- Description: The text displayed on the button.
onClick
- Type: () => void
- Description: Function triggered when the button is clicked.
size
- Type: "small" | "medium" | "large" | "full"
- Description: Size of the button.
color
- Type: "primary" | "secondary" | "danger" | "plate"
- Description: Color variant of the button.
<Button text="Learn more" size="large" color="primary" onClick={() => navigate('/docs')} />
This button is large, with a primary color variant, and navigates to the /docs page when clicked.
Examples
Visual:
Code:
<div className="flex flex-col md:flex-row md:flex-wrap items-center rounded-md bg-slate-400 space-y-2 md:space-x-5 md:space-y-0 h-auto p-2">
<Button text="Primary Full" size="full" color="primary" onClick={() => alert('Primary')} />
<Button text="Secondary Large" size="large" color="secondary" onClick={() => alert('Secondary')} />
<Button text="Danger Medium" size="medium" color="danger" onClick={() => alert('Danger')} />
<Button text="Plate Small" size="small" color="plate" onClick={() => alert('Plate')} />
</div>```