Buttons

Button components for various use cases including standard buttons, language selectors, and social login buttons.

Button Variants

Displays a button or a component that looks like a button.

Installation

The Button component is part of the design system. Import it from the UI package.

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

Usage

Use Button with variant and size. Copy the example below to get started.

Examples

Variants

Sizes

With Icon

States

Border Radius

API Reference

The Button component supports variant, size, and radius. See the interface below for full prop details.

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "outline" | "error" | "error-secondary" | "error-outline" | "grey-text" | "grey-disabled" | "color-text" | "disabled" | "disabled-outline" | "ghost"
  size?: "xl" | "lg" | "md" | "sm" | "icon" | "icon-xl" | "icon-lg" | "icon-md" | "icon-sm"
  radius?: "default" | "full" | "none"
  asChild?: boolean
}