Badge

Preview

به من توجه کن

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

<Badge>به من توجه کن</Badge>;

Installation

npx the-dig@latest add Badge

Props

Prop	Type	Default
variant	"contained" | "tinted"	"contained"
color	"brand" | "info" | "success" | "warning" | "danger" | "gray"	"brand"
className	string	-
Others	HTMLAttributes<HTMLDivElement> (e.g. onClick, disabled, etc.)	Document

Variants and Colors

Brand

به من توجه کن

به من توجه کن

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

<Badge variant="contained" color="brand">
  به من توجه کن
</Badge>
<Badge variant="tinted" color="brand">
  به من توجه کن
</Badge>

Info

به من توجه کن

به من توجه کن

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

<Badge variant="contained" color="info">
  به من توجه کن
</Badge>
<Badge variant="tinted" color="info">
  به من توجه کن
</Badge>

Success

به من توجه کن

به من توجه کن

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

<Badge variant="contained" color="success">
  به من توجه کن
</Badge>
<Badge variant="tinted" color="success">
  به من توجه کن
</Badge>

Warning

به من توجه کن

به من توجه کن

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

<Badge variant="contained" color="warning">
  به من توجه کن
</Badge>
<Badge variant="tinted" color="warning">
  به من توجه کن
</Badge>

Danger

به من توجه کن

به من توجه کن

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

<Badge variant="contained" color="danger">
  به من توجه کن
</Badge>
<Badge variant="tinted" color="danger">
  به من توجه کن
</Badge>

Gray

به من توجه کن

به من توجه کن

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

<Badge variant="contained" color="gray">
  به من توجه کن
</Badge>
<Badge variant="tinted" color="gray">
  به من توجه کن
</Badge>