Chip

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

export function Basic() {
  return (
    <div role="group" aria-label="Contract status" style={{ display: 'flex', gap: 8 }}>
      <Chip defaultSelected>Signed</Chip>
      <Chip>Awaiting signature</Chip>
      <Chip>Expired</Chip>
    </div>
  );
}

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

export function QuickFilters() {
  const all = ['Sales', 'Legal', 'Support', 'Engineering'];
  const [active, setActive] = React.useState<string[]>(['Sales']);
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <div
        role="group"
        aria-label="Departments"
        style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
      >
        {all.map((d) => (
          <Chip
            key={d}
            selected={active.includes(d)}
            onSelectedChange={(on) => setActive((a) => (on ? [...a, d] : a.filter((x) => x !== d)))}
          >
            {d}
          </Chip>
        ))}
      </div>
      <p style={{ margin: 0, fontSize: 14 }}>
        Showing: {active.length ? active.join(', ') : 'all departments'}
      </p>
    </div>
  );
}

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

export function Sizes() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
      <Chip size="sm" icon={<Icon name="clock" size={12} />}>
        Recent
      </Chip>
      <Chip icon={<Icon name="star" size={14} />}>Favourites</Chip>
      <Chip disabled>Archived</Chip>
    </div>
  );
}