Chip

New

Теги та чіпси з можливістю видалення та іконками.

Import

import { Chip } from '@brutal-ui/react';

Basic Usage

DefaultPrimarySuccessWarningError

<Chip>Default</Chip>
<Chip variant='primary'>Primary</Chip>
<Chip variant='success'>Success</Chip>

With Delete

ReactTypeScriptTailwind

const [tags, setTags] = useState(['React', 'TypeScript', 'Tailwind']);

{tags.map((tag) => (
  <Chip
    key={tag}
    onDelete={() => setTags(tags.filter(t => t !== tag))}
  >
    {tag}
  </Chip>
))}

With Icons

⚛️React🔷TypeScript🟢Node.js

<Chip icon='⚛️'>React</Chip>
<Chip icon='🔷' variant='primary'>TypeScript</Chip>

Props

Prop	Type	Default	Description
children	ReactNode	-	Chip content
variant	string	"default"	Color variant
icon	string	-	Optional icon
onDelete	function	-	Delete handler