Button

The Button component is used for user interactions and form submission. It offers several customization options, including different sizes, variants, color schemes, icons, and loading states.

tsx

import { Button } from "@arkyn/components";

Basic Usage

tsx

<Button>Standard Button</Button>

Sizes

The available sizes are lg, md, sm, and xs. Each size offers a different height and padding to suit the layout needs and visual hierarchy of the interface.

tsx

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Variants

The available variants are solid, outline, ghost, and invisible. Each variant offers a different visual style, allowing you to create hierarchies and emphasize different types of actions in the interface.

tsx

<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="invisible">Invisible</Button>

Color schemes

The available color schemes are primary, success, warning, danger, and info. Each scheme conveys a specific semantic meaning and helps users understand the type of action that will be performed.

tsx

<Button scheme="primary">Primary</Button>
<Button scheme="success">Success</Button>
<Button scheme="warning">Warning</Button>
<Button scheme="danger">Danger</Button>
<Button scheme="info">Information</Button>

Buttons with icons

Buttons can include icons on the left, right, or both sides, and must be of the LucideIcon type.

Left-side icon

Use left-side icons when you want to emphasize the action or when the icon is more recognizable than the text. This is especially useful for primary actions and navigation buttons.

tsx

<Button leftIcon={Save} scheme="success">Save</Button>
<Button leftIcon={Search} scheme="info">Search</Button>
<Button leftIcon={Home}>Home</Button>

Right-side icon

Right-hand icons are ideal for indicating the direction or result of an action, such as submitting, moving forward, or executing an operation. They complement the text by providing additional visual context.

tsx

<Button rightIcon={Trash2} scheme="danger">Delete</Button>
<Button rightIcon={Edit} scheme="warning">Edit</Button>
<Button rightIcon={Send}>Send</Button>

Disabled button

The button's disabled state indicates that it cannot be clicked or interacted with. It will be activated by the disabled property or when it is in the isLoading state.

tsx

<Button disabled>Disabled</Button>
<Button disabled scheme="success">Not available</Button>
<Button disabled leftIcon={Save}>Save</Button>

Loading state

The loading state is used to indicate that an operation is in progress, providing visual feedback to the user and preventing accidental multiple clicks during processing.

Simple loading

Simple loading displays only an animated spinner without custom text, maintaining the original button text during the loading state.

tsx

<Button isLoading>Loading...</Button>

Loading with custom text

Custom loading text allows you to provide specific context about the ongoing operation, improving the user experience by clearly communicating what is being processed.

tsx

<Button isLoading loadingText="Saving...">
  Save
</Button>

Button Width

If the button loading text is too long, the button will automatically adjust to the content size.

Properties

isLoading - boolean (default: false) Controls the loading state with the spinner

loadingText - string Text to display during the loading state

size - "xs" | "sm" | "md" | "lg" (default: "md") Button size

variant - "solid" | "outline" | "ghost" | "invisible" (default: "solid") Button visual variant

scheme - "primary" | "success" | "warning" | "danger" | "info" (default:"primary"`) Button Color Scheme

leftIcon - LucideIcon Optional icon to display on the left

rightIcon - LucideIcon Optional icon to display on the right

Other Properties

All other standard HTML properties for <button> are also supported.

Notes

Icons are automatically resized based on the button size (xs: 12px, sm: 16px, md: 20px, lg: 24px)
The loading state displays an animated spinner from the Lucide React library

On this page