Button

The Button component supports various sizes, variants, loading states, and styling options.

Import

import { Button } from "amvasdev-ui";

Examples

Basic Usage

<Button>Click me</Button>

Variants

<Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="success">Success</Button>
  <Button variant="error">Error</Button>
  <Button variant="ghost">Ghost</Button>

Sizes

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

Loading State

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

  <Button
    isLoading
    loadingStyles={{ type: "dots", size: "sm" }}
    disabledOnLoading={false}
  >
    Custom Loading
  </Button>

Outlined Style

<Button variant="primary" outlined>Outlined Primary</Button>
  <Button variant="error" outlined>Outlined Error</Button>

Available Variants

baseneutralprimarysecondaryaccentinfosuccesswarningerrorghostlink

Available Sizes

xssmmdlg

Notes

Loading types: spin, dots, ring, ball, bars, infinity
All standard HTML button props are supported