Button

Preview

import Button from "@repo/ui/Button";

<Button>کلیک کن</Button>;

Variants and Colors

Brand

import Button from "@repo/ui/Button"

<Button variant="contained" color="brand">
  کلیک کن
</Button>
<Button variant="tinted" color="brand">
  کلیک کن
</Button>
<Button variant="outlined" color="brand">
  کلیک کن
</Button>

Info

import Button from "@repo/ui/Button"

<Button variant="contained" color="info">
  کلیک کن
</Button>
<Button variant="tinted" color="info">
  کلیک کن
</Button>
<Button variant="outlined" color="info">
  کلیک کن
</Button>

Success

import Button from "@repo/ui/Button"

<Button variant="contained" color="success">
  کلیک کن
</Button>
<Button variant="tinted" color="success">
  کلیک کن
</Button>
<Button variant="outlined" color="success">
  کلیک کن
</Button>

Warning

import Button from "@repo/ui/Button"

<Button variant="contained" color="warning">
  کلیک کن
</Button>
<Button variant="tinted" color="warning">
  کلیک کن
</Button>
<Button variant="outlined" color="warning">
  کلیک کن
</Button>

Danger

import Button from "@repo/ui/Button"

<Button variant="contained" color="danger">
  کلیک کن
</Button>
<Button variant="tinted" color="danger">
  کلیک کن
</Button>
<Button variant="outlined" color="danger">
  کلیک کن
</Button>

Gray

import Button from "@repo/ui/Button"

<Button variant="contained" color="gray">
  کلیک کن
</Button>
<Button variant="tinted" color="gray">
  کلیک کن
</Button>
<Button variant="outlined" color="gray">
  کلیک کن
</Button>

Icon

import Button from "@repo/ui/Button"

<Button variant="contained" color="brand" startIcon={<BadgeCheck size={18} />}>
  کلیک کن
</Button>
<Button variant="tinted" color="brand" endIcon={<BadgeCheck size={18} />}>
  کلیک کن
</Button>

Loading

isShowAdornmentLoading

Loading

import Button from "@repo/ui/Button"

<Button variant="contained" isLoading={isLoading} loadingPosition="start" color="brand" startIcon={<BadgeCheck size={18} />}>
    ثبت
</Button>
<Button variant="tinted" color="brand" isLoading={isLoading} loadingPosition="end" endIcon={<BadgeCheck size={18} />}>
    پرداخت
</Button>
<Button variant="contained" color="success" isLoading={isLoading} endIcon={<BadgeCheck size={18} />}>
    برداشت
</Button>
<Button variant="tinted" color="success" isLoading={isLoading} loadingIndicator="در حال دریافت ..." endIcon={<BadgeCheck size={18} />}>
    انتقال
</Button>
<Button variant="outlined" color="success" isLoading={isLoading} loadingPosition="start" startIcon={<BadgeCheck size={18} />}>
    شارژ
</Button>
<Button variant="outlined" color="brand" isLoading={isLoading} loadingPosition="end" endIcon={<BadgeCheck size={18} />}>
    گزارشات
</Button>
<Button Button variant="outlined" color="warning" isLoading={isLoading} endIcon={<BadgeCheck size={18} />}>
    حذف
</Button>
<Button variant="outlined" color="gray" isLoading={isLoading} loadingIndicator="در حال دریافت ..." endIcon={<BadgeCheck size={18} />}>
    ویرایش
</Button>
<Button variant="tinded" color="danger" isLoading={isLoading} loadingPosition="start" isShowAdornmentLoading={isShowAdornment} startIcon={<BadgeCheck size={18} />}>
    ثبت
</Button>
<Button variant="contained" color="danger" isLoading={isLoading} loadingPosition="end" isShowAdornmentLoading={isShowAdornment} endIcon={<BadgeCheck size={18} />}>
    پرداخت
</Button>
<Button variant="contained" color="gray" isLoading={isLoading} endIcon={<BadgeCheck size={18} />}>
    برداشت
</Button>
<Button variant="tinted" color="gray" isLoading={isLoading} loadingIndicator="در حال دریافت ..." endIcon={<BadgeCheck size={18} />}>
    انتقال
</Button>
<Button variant="outlined" color="success" isLoading={isLoading} loadingPosition="start" startIcon={<BadgeCheck size={18} />}>
    شارژ
</Button>
<Button variant="outlined" color="brand" isLoading={isLoading} loadingPosition="end" endIcon={<BadgeCheck size={18} />}>
    گزارشات
</Button>
<Button variant="outlined" color="warning" isLoading={isLoading} endIcon={<BadgeCheck size={18} />}>
    حذف
</Button>
<Button variant="outlined" color="gray" isLoading={isLoading} loadingIndicator="در حال دریافت ..." endIcon={<BadgeCheck size={18} />}>
    ویرایش
</Button>

Sizes

import Button from "@repo/ui/Button"

<Button size="xs">کلیک کن</Button>
<Button size="sm">کلیک کن</Button>
<Button size="md">کلیک کن</Button>
<Button size="lg">کلیک کن</Button>
<Button size="xl">کلیک کن</Button>

Installation

npx the-dig@latest add Button,CircularProgress

Props

Prop	Type	Default
variant	"contained" | "tinted" | "outlined"	"contained"
className	string	-
color	"brand" | "info" | "success" | "warning" | "danger" | "gray"	"brand"
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"
isLoading	boolean	false
Others	ButtonHTMLAttributes<HTMLButtonElement> (e.g. onClick, disabled, etc.)	Document
startIcon	ReactNode	-
endIcon	ReactNode	-
loadingIndicator	string	null
loadingPosition	"start" | "end"	null
isShowAdornmentLoading	boolean	false