Tag

A pill label with six color variants, an optional emoji or icon, and a removable mode that pops out before calling back.

ReanimatedHapticsNativeWindSource

Prerequisites

Tag needs icons, haptics, and Reanimated for its mount/remove pop.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-reanimated

Install


npx @rslab/cli add tag

Usage


import { RocketIcon } from '@hugeicons/core-free-icons';

import { Tag } from '@/components/ui/Tag';



<Tag label="Remote" emoji="🌍" color="blue" />

<Tag label="Launch" icon={RocketIcon} color="purple" />

Make it removable and it pops out before your state updates:

<Tag
  label="Senior"

  color="green"

  removable

  onRemove={() => removeFilter('senior')}
/>

Props

PropTypeDefault

label

string

-

color?

'neutral''blue''green''red''yellow''purple'

'neutral'

emoji?

string

-

A leading emoji. Takes priority over icon if both are set.

icon?

HugeiconsIcon

-

A Hugeicons icon, shown when no emoji is set.

removable?

boolean

false

Shows a trailing X that animates the tag out before calling onRemove.

onRemove?

() => void

-

Called once the exit animation finishes.

haptic?

boolean

true

Mute the remove tick.

className?

string

-

Extend or override the pill.

How it works

Color variants are plain className maps, not a runtime color library, background, text, and icon colors are simple lookups keyed by color, so adding a seventh color is a one-line addition to three maps, not new logic.
Emoji beats icon. If both emoji and icon are passed, the emoji wins, it's usually the more expressive choice for a status tag, and there's rarely a reason to want both at once.
Mount pops in, remove pops out. A tag entering a list fades and scales in from a slightly smaller size on mount; removing one reverses that and only calls onRemove once the fade-out finishes, so the tag is actually gone from the screen before it's gone from your state, not the other way around.
Plain timing throughout, no spring. Tags get added and removed often enough in a real list (filter chips, selected items) that a bouncy spring on every add/remove would get old fast.

Tuning

The color maps, add a new color by extending all three (background, text, icon) with the same key.
The 0.9 scale on mount/unmount and its timings, how pronounced the pop is.

See exactly how this works with an RSLAB subscription.

Get Pro

Prerequisites

Install

Usage

Props

On this page