Action
Interactive

Button

The essential interactive trigger for actions and navigation. Designed with a soft aesthetic and premium focus states.

Standard Buttons

Our core button variants for everyday actions.

Base Variants

Sizes & States

Adjust dimensions and feedback for specific contexts.

Sizing & Loading

Icon Buttons

Standardized icon behaviors and square variants.

Buttons with Icons

Usage Implementation

# Import

import { Button } from "@/components/ui/button";

# Usage

<Button variant="primary" size="lg" isLoading={false}>

Get Started

</Button>