---
name: Tag
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import Tag from './Tag'
import { livePreviewStyle } from '../helpers/constants'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Tag

The `Tag` Component is a chip that let users present text inside it that can be deleted.

### Try it out

export const code = `() => {
  const [values, setValues] = React.useState([{label:'Cactus', id:'1'}, {label:'Web', id:'2'}])
  const deleteTag = (id) => {
      setValues(values.filter((e) => e.id !== id))
    }
    return (
      <div>
        {values.map((e) => (
          <Tag
            closeOption
            id={e.id}
            key={e.id}
            onCloseIconClick={() => deleteTag(e.id)}
          >
            {e.label}
          </Tag>
        ))}
      </div>
    )
    }
`

<LiveProvider code={code} scope={{ Tag }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Basic usage

```jsx
import React from 'react'
import { Tag } from '@repay/cactus-web'
...

//Basic Usage
 <Tag
  closeOption
  id='id'
  onCloseIconClick={doSomething}
  >
  "Label for the tag"
</Tag>
```

### Close Button

The visibility of the close button is controlled by either passing a handler to
`onCloseIconClick` or the `closeOption` prop. Passing a handler is equivalent to
`closeOption={true}`, but if you want the close button without using an actual
`<button>` element, you can pass `closeOption="no-button"`.

If you need to identify which tag of several was clicked, you can make it simpler
by giving the tag an ID: then the close button will have an `aria-controls` attribute
with the tag's ID in it. For example:

```jsx
const TagList = () => {
  const [tags, setTags] = useState(['one', 'two'])
  const onClose = (e) => {
    const id = e.currentTarget.getAttribute('aria-controls')
    setTags(tags.filter((t) => t !== id))
  }
  return (
    <>
      {tags.map((t) => <Tag key={t} id={t} onCloseIconClick={onClose}>{t}</Tag>)}
    </>
  )
}
```

## Properties

<PropsTable of={Tag} />