Button

A clickable element that triggers an action. Buttons can be used to submit forms, open modals, or navigate to different pages.

Import

import { Button } from "@aeonkit/react";

Usage

Solid

The default button style, which has a solid background color.

Preview

Solid

Code

<Button>Solid</Button>

Ghost

Ghost buttons are transparent and have no background color.

Preview

Ghost

Code

<Button variant="ghost">Ghost</Button>

Outline

Outline buttons have a transparent background and a border.

Preview

Outline

Code

<Button variant="outline">Outline</Button>

Danger

Danger buttons are red and are used to indicate a destructive action.

Preview

Danger

Code

<Button variant="danger">Danger</Button>

Link

Link buttons are styled to look like a hyperlink.

Preview

Link

Code

<Button variant="link">Link</Button>

Rounded

Rounded buttons have rounded corners.

Preview

Rounded

Code

<Button rounded>Rounded</Button>

Icon Button

Buttons can include an icon.

Preview

Code

<Button className="rounded-md">
  <LuCheckCircle className="text-slate-50" size={20} />
</Button>

Props

Button

color?

"primary" "secondary" "slate" "gray" "zinc" "neutral" "stone" "red" "orange" "amber" "yellow" "lime" "green" "emerald" "teal" "cyan" "sky" "blue" "indigo" "violet" "purple" "fuchsia" "pink" "rose"

The button color.

rounded?

boolean

Whether the button should be rounded.

Default: false

variant?

"solid" "outline" "link" "danger" "ghost"

The button variant.

Default: solid

size?

"xs" "sm" "md" "lg" "xl"

The button size.

Default: md

API Interface: ButtonProps