Button

The Button component is used for triggering actions. It supports different styles, sizes, icons, and accessibility states.

Types

Use variant to define the button style.

<Button>Filled</Button>

<Button variant="outlined">Outlined</Button>

<Button variant="colored">Colored default</Button>

<Button variant="custom" className="bg-pink-500 hover:bg-pink-800 text-white">Colored custom</Button>

Supports small and medium sizes.

<Button size="sm">Small</Button>

<Button size="md">Medium</Button>

Add an icon before or after the button label.

<Button icon={<ArrowLeft />} iconPosition="left">Back</Button>

<Button icon={<ArrowRight />} iconPosition="right">Next</Button>

Use full to make the button span the full width of its container.

<Button full>Submit</Button>

Buttons can be disabled to prevent user interaction.

<Button disabled>Disabled</Button>

<Button variant="outlined" disabled>Disabled</Button>

The Button component can be referenced using the following format:

import Button from "../../components/Button";

The button includes accessible focus styles with a blue outline and offset. Buttons are also fully operable with keyboard navigation by default.