Chip

Preview

این یک متن نمونه است

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

<Chip />;

Installation

npx the-dig@latest add Chip

Props

Prop	Type	Default
color	"brand" | "info" | "success" | "warning" | "danger" | "gray"	"brand"
startAdornment	ReactNode
className	string	-
Others	ButtonHTMLAttributes<HTMLButtonElement> (e.g. onClick, disabled, etc.)	Document

Colors

این یک متن نمونه استاین یک متن نمونه استاین یک متن نمونه استاین یک متن نمونه استاین یک متن نمونه استاین یک متن نمونه است

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

<Chip color="brand">این یک متن نمونه است</Chip>
<Chip color="info">این یک متن نمونه است</Chip>
<Chip color="success">این یک متن نمونه است</Chip>
<Chip color="warning">این یک متن نمونه است</Chip>
<Chip color="danger">این یک متن نمونه است</Chip>
<Chip color="gray">این یک متن نمونه است</Chip>

Start Adornment

این یک متن نمونه است

این یک متن نمونه است

این یک متن نمونه است

این یک متن نمونه است

این یک متن نمونه است

این یک متن نمونه است

import Chip from "@repo/ui/Chip";
import { BadgeCheck } from "lucide-react";

<Chip color="brand" startAdornment={<BadgeCheck size={16}/>}>
  این یک متن نمونه است
</Chip>
<Chip color="info" startAdornment={<BadgeCheck size={16}/>}>
  این یک متن نمونه است
</Chip>
<Chip color="success" startAdornment={<BadgeCheck size={16}/>}>
  این یک متن نمونه است
</Chip>
<Chip color="warning" startAdornment={<BadgeCheck size={16}/>}>
  این یک متن نمونه است
</Chip>
<Chip color="danger" startAdornment={<BadgeCheck size={16}/>}>
  این یک متن نمونه است
</Chip>
<Chip color="gray" startAdornment={<BadgeCheck size={16}/>}>
  این یک متن نمونه است
</Chip>