Tag

props => <Tag {...props} />

() => <Tag a11yTitle="Tag component" />

() => <Tag icon={<FormSubtract />} />

() => <Tag disabled={true} label="Disabled" />

() => (
  <Tag focusable={false} label="Cant focus" />
)

() => (
  <Tag background="accent-1" label="accent-1" />
)

() => (
  <Tag
    border={{
      side: 'all',
      size: 'medium',
      color: 'accent-1',
    }}
    round="medium"
    label="border"
  />
)

() => (
  <Tag onClick={() => console.log('onClick')} />
)

() => {
  const [iconIndex, setIconIndex] = React.useState(0);
  const onToggle = () => {
    setIconIndex(1 - iconIndex);
  };
  return (
    <Tag
      icon={tagIcons[iconIndex]}
      onClick={() => console.log('onClick')}
      onChange={onToggle}
    />
  );
}

() => <Tag reverse={true} label="Adam" />

() => <Tag size="large" label="Large" />