# @s-ui/react-atom-tag

> > Atom Element: SUI Tag

Latest version **4.1.0** (published 2025-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @s-ui/react-atom-tag
pnpm add @s-ui/react-atom-tag
yarn add @s-ui/react-atom-tag
bun add @s-ui/react-atom-tag
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2025-04-29 |
| First published | 2020-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alejandro.ferrante, ivanmlaborda, salvador.juan, andresin87.adevinta, izeller, gfabregoadv, a.ferrer, ignacio_navarro, oscar_ramirez, jordi.munoz, joanleon-adv, aitor.rodriguez, luis-garrido, jenifer.lopez, isabelgomez87, pa.chruscinski.ext, schibstedspain, alfredo.arronte, belen.santos, xavi_ballestar, ferrangbtw, jamile.radloff, davidmartin2108, sergi.quintela, estefania_garcia, carlosvillu-adevinta, miriam-gil, arnau.guell, ferran.simon, victor.perez.adevinta, mariapaula.forero.ext, oscar.gomez, david.nieto, oriol.puig, nacho_torrella, xavi.murcia, ignacio.rodriguez, francisco.ruiz.lloret, sziauberyte, alfredo.zimperz, andresadv, javiauso, alverd004, marian.lucaci, pablogs, alisa_bayanova, cristhianb, sergiocollado, pablo.rey-adevinta, beatrizip, alex.castells, david.cuadrado.ext, giovanny.sayas.ext, patricio.sartore, azahara, marc.benito, sergio.escano, cristina.rodriguez.duque, pol.valls, frandelacasa-adevinta, carolina.mallo.ext, daniel.perez.ext, hpintos_adevinta, carlos.gonzalezl, albert.peiro, oscar-raig-adevinta, thomas.page.ext, sebastian.badea.adevinta, victoria.pasichnyk.ext, sendami.luque.ext, luz_adv, alfredo.narvaez, ruben-martin, dann41, emiliovz, adria.velardos, arturo.vicente, diegomr, sergi.martinez.adevinta, guillemgc3, frontend-jobs, javiermiguel, atilioscolaroadv, crotundu.adevinta, candymd, florinz, denis_z, anya_ok |
| Keywords | @s-ui, react, component, atom, tag |

## Links

- npm: https://www.npmjs.com/package/@s-ui/react-atom-tag
- Repository: https://github.com/SUI-Components/sui-components
- Homepage: https://sui-components.vercel.app/
- Issues: https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Component%3A+tag%22
- npm.io page: https://npm.io/package/@s-ui/react-atom-tag

## Dependencies (4)

- [emulate-tab](https://npm.io/package/emulate-tab.md) 1.2.1
- [@s-ui/react-hooks](https://npm.io/package/@s-ui/react-hooks.md) 1
- [@s-ui/component-dependencies](https://npm.io/package/@s-ui/component-dependencies.md) 1
- [@s-ui/react-primitive-injector](https://npm.io/package/@s-ui/react-primitive-injector.md) 1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2025-04-29
- 2.44.0-beta.0 (beta) — 2022-10-26
- 4.0.0 — 2025-02-24
- 3.0.0 — 2025-02-21
- 2.55.0 — 2024-08-21
- 2.54.0 — 2024-05-06
- 2.53.0 — 2023-07-25
- 2.52.0 — 2023-07-20
- 2.51.0 — 2023-07-19
- 2.50.0 — 2023-05-18
- 2.49.0 — 2022-11-24
- 2.48.0 — 2022-11-23
- 2.47.0 — 2022-11-22
- 2.46.0 — 2022-11-17
- 2.45.0 — 2022-11-10
- … 40 more at https://npm.io/package/@s-ui/react-atom-tag/versions

## README

# AtomTag

> Atom Element: SUI Tag

We use tags to visually emphasise features of the UI and make recognition and interaction easier.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/tag/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,tag)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-tag?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-tag)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Atag&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Atag)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-tag)](https://github.com/SUI-Components/sui-components/blob/main/components/tag/table/LICENSE.md)

## Installation

```sh
npm install @s-ui/react-atom-tag --save
```

## Usage

```js
import AtomTag from '@s-ui/react-atom-tag'

<AtomTag label='Tag Structure' />
```

### Size

Tags structure can have 3 main sizes: Small, medium (default) and large. You can use this prop size to modify it.

`small | medium (default) | large`

```js
<AtomTag
  label="Structure Tag"
  size="small"
/>

<AtomTag
  label="Structure Tag"
  size="medium"
/>

<AtomTag
  label="Structure Tag"
  size="large"
/>
```

### Design

Tags structure can have 2 designs: Solid (default) and outline. You can use this prop design to modify it.

`solid (default) | outline`

```js
<AtomTag
  label="Structure Tag"
  design="solid"
/>

<AtomTag
  label="Structure Tag"
  design="outline"
/>
```

### Actionable

Actionable tags can be used as an anchor. Same as `<a>` to define an interactivity with the component.

```js
<AtomTag
  label="Navigation Tag"
  onClick={() => alert('click!')}
/>

<AtomTag
  href="https://sui-components.now.sh/"
  label="Anchor Tag"
  target="_blank"
/>
```

### Icons

Tags can include an action icon (generally a close icon). This icon will always be located to the right of content. You can add use the icon and closeIcon to added a icon.

```js
<AtomTag label="Tag Structure Tag" icon={<Icon />} />
```

### Responsive

Use the responsive true for make responsive layout. keep large size in mobile.

```js
<AtomTag label="Tag Structure" responsive />
```

### Tag types

Use the type in order to color it as desired from a high order component.

If you want to customize your tag you can pass a prop to identify this type and you also need to set your custom set of types in Sass:

**Your theme file** (Sass)

```css
$atom-tag-types: (
  "alert": (
    bgc: red,
    c: white
  ),
  "warning": (
    bgc: orange,
    c: white
  )
);
```


### Value

Use the prop value if you want to use this value on your onClick/onClose handler.

```js
<AtomTag
  label="Tag with value"
  onClick={(_, {value}) => alert('click! this is my value', value)}
  value={42}
/>
```

### onClose

The onClose event is triggered when the passed `closeIcon` is clicked.
It receives the native event as first argument and an object with the passed `label` and `value` as second argument.

```js
<AtomTag
  label="Tag with value"
  value={42}
  onClose={(_, {value, label}) => alert('Click! These are my value and label', {value, label})}
  closeIcon={<IconClose />}
/>
```


**Your high order component**

```js
<AtomTag type="alert" />
```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/tag).**

---
_Source: https://npm.io/package/@s-ui/react-atom-tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._