Tag

import { Tag } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <Tag>Sales</Tag>
      <Tag>London office</Tag>
      <Tag>Q4 campaign</Tag>
    </div>
  );
}

import * as React from 'react';
import { Tag } from '@bindshq/stance-react';

export function Removable() {
  const [tags, setTags] = React.useState(['Marketing', 'Legal', 'EMEA', 'Contractors']);
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {tags.map((t) => (
        <Tag key={t} onRemove={() => setTags((all) => all.filter((x) => x !== t))}>
          {t}
        </Tag>
      ))}
      {tags.length === 0 && <span>All departments removed.</span>}
    </div>
  );
}

import { Icon, Tag } from '@bindshq/stance-react';

export function WithIcons() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
      <Tag size="sm" icon={<Icon name="users" size={12} />}>
        Group
      </Tag>
      <Tag icon={<Icon name="building" />}>Northwind Ltd</Tag>
      <Tag icon={<Icon name="globe" />} onRemove={() => {}} disabled>
        Global
      </Tag>
    </div>
  );
}