Tag Component

References:
Ant Design : https://ant.design/components/tag
Vercel: https://vercel.com/design/tag
UI Patterns: http://ui-patterns.com/patterns/Tag

Although Tag component looks same as our Button component with icons on both sides and content. Use cases and the API can be a bit different since Tag is a closable/removable item.

When to use:

• Organizing/Categorizing based on tags
• Adding filters with removable tags

Props

• closable - boolean | default - false
• prefix - ReactNode | default - null
• suffix - ReactNode | default - <CloseIcon />
• onClose - (id) => void | callback to fire on close icon is clicked

By default Tag component will have x close icon in the suffix if the closable prop is true.

API

<Tag prefix={<UserIcon />} closable onClose={() => alert(1)}>
  Tag
</Tag>

Change suffix icon

<Tag suffix={<UserIcon />} closable onClose={() => alert(1)}>
  Tag
</Tag>

TagGroup

Reference: https://vercel.com/design/tag

We can also add a TagGroup component to handle the keyboard logic for the multiple tags
Ideally TagGroup will be a composite which would allows users to navigate the tags icons with ArrowLeft/Right
Note: The state logic for removing/adding the tags will be handled by the user not us.

Props

• allowArrowNavigation - boolean | if true will enable arrow navigation for the close icons

const [tags, setTags] = useState(['One', 'Two', 'Three'])
return (
  <TagGroup>
    {tags.map(tag => (
      <Tag
        id={tag}
        key={tag}
        onClose={id => setTags(tags.filter(t => t !== id))}
  >    
        {tag}
      </Tag>
    ))}
  </TagGroup>
)