Chip

Usage

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

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

<Chip />;

Installation

npx the-dig@latest add Chip

Props

Chip renders a native button and forwards button attributes. Set type="button" in forms and provide an accessible name when the content is icon-only.

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>