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>```

Accordion CircularProgress