Chip

A compact element for displaying status, labels, or tags.

Default

The default chip is a compact baseline that makes the color and variant families easier to compare later.

Default Chip

tsx

<Chip>Default Chip</Chip>

Installation

tsx

import { Chip } from "madagent";

Colors

Chip styles are easier to scan as two families: the stronger solid treatment and the lighter muted treatment.

Solid

PrimarySuccessWarningErrorNeutralSecondary

tsx

<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
  <Chip color="primary">Primary</Chip>
  <Chip color="success">Success</Chip>
  <Chip color="warning">Warning</Chip>
  <Chip color="error">Error</Chip>
  <Chip color="neutral">Neutral</Chip>
  <Chip color="secondary">Secondary</Chip>
</div>

Muted

PrimarySuccessWarningErrorNeutralSecondary

tsx

<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
  <Chip variant="muted" color="primary">Primary</Chip>
  <Chip variant="muted" color="success">Success</Chip>
  <Chip variant="muted" color="warning">Warning</Chip>
  <Chip variant="muted" color="error">Error</Chip>
  <Chip variant="muted" color="neutral">Neutral</Chip>
  <Chip variant="muted" color="secondary">Secondary</Chip>
</div>

With Icon

FeaturedDismiss

tsx

<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
  <Chip icon={<Star size={12} />}>Featured</Chip>
  <Chip icon={<X size={12} />} iconPosition="right">
    Dismiss
  </Chip>
</div>

Removable

Provide onRemove for selected filters or tokens. The remove affordance is a keyboard-accessible CloseButton with a contextual accessible name.

FinanceOperationsPeople

tsx

<Chip
  variant="muted"
  color="neutral"
  onRemove={() => removeFilter("Finance")}
>
  Finance
</Chip>

API Reference

Prop	Type	Default	Description
`variant`	`"solid""muted"`	`"solid"`	Visual style variant
`color`	`"primary""success""warning""error""neutral""secondary"`	`"primary"`	Color theme
`icon`	`ReactNode`	-	Optional icon element
`iconPosition`	`"left""right"`	`"left"`	Position of the icon relative to the label
`children`	`ReactNode`	-	Chip label. If omitted, icon is required
`onRemove`	`(event) => void`	-	Adds a trailing CloseButton and runs when it is activated
`removeLabel`	`string`	-	Accessible name for the remove button; recommended for non-text children

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

بطاقةنجاحتحذيرخطأ

Usage

tsx

<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
  <Chip color="primary">بطاقة</Chip>
  <Chip color="success">نجاح</Chip>
  <Chip color="warning">تحذير</Chip>
  <Chip color="error" icon={<Tag size={14} />}>خطأ</Chip>
</div>

<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}> <Chip color="primary">Primary</Chip> <Chip color="success">Success</Chip> <Chip color="warning">Warning</Chip> <Chip color="error">Error</Chip> <Chip color="neutral">Neutral</Chip> <Chip color="secondary">Secondary</Chip> </div>

<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}> <Chip variant="muted" color="primary">Primary</Chip> <Chip variant="muted" color="success">Success</Chip> <Chip variant="muted" color="warning">Warning</Chip> <Chip variant="muted" color="error">Error</Chip> <Chip variant="muted" color="neutral">Neutral</Chip> <Chip variant="muted" color="secondary">Secondary</Chip> </div>