Tag

Display

Selectable chip with animated color transitions, 5 semantic variants, icon slot, 3 sizes, removable mode, and TagGroup for single/multi-select filter groups.

GitHub

Installation

bash

npx native-mate add tag

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Tag, TagGroup } from '~/components/ui/tag'
import { useState } from 'react'

// Static tag
<Tag label="React Native" />

// Dismissible
<Tag label="TypeScript" onRemove={() => removeTag('typescript')} />

// Selectable single tag
<Tag label="Design" selected={active} onPress={() => setActive(v => !v)} variant="primary" />

// Filter group (single select)
<TagGroup
  tags={[
    { label: 'All' },
    { label: 'Design', variant: 'primary' },
    { label: 'Engineering', variant: 'success' },
  ]}
  selected={filters}
  onChange={setFilters}
/>

// Filter group (multi select)
<TagGroup tags={categories} selected={selected} onChange={setSelected} multiSelect />

Props

Prop	Type	Default	Description
label	string	—	Text content of the tag.
selected	boolean	false	Highlights the tag with the variant accent color.
onPress	() => void	—	Makes the tag pressable with a spring scale animation and haptic.
onRemove	() => void	—	Shows a close (×) button. When pressed, calls this handler.
variant	"default" \| "primary" \| "success" \| "warning" \| "destructive" \| "info"	"default"	Color accent applied in selected state.
icon	React.ReactNode	—	Element rendered before the label (e.g. an Ionicon).
size	"sm" \| "md" \| "lg"	"md"	Controls padding and font size.
disabled	boolean	false	Reduces opacity and prevents interaction.

Example

tsx

import { useState } from 'react'
import { Tag, TagGroup } from '~/components/ui/tag'
import { View } from 'react-native'
import { Text } from '@native-mate/core'

const CATEGORIES = [
  { label: 'All', variant: 'default' as const },
  { label: 'Design', variant: 'primary' as const },
  { label: 'Engineering', variant: 'success' as const },
  { label: 'Marketing', variant: 'warning' as const },
  { label: 'Support', variant: 'info' as const },
]

export function TagExample() {
  const [filter, setFilter] = useState(['All'])
  const [skills, setSkills] = useState(['React Native', 'TypeScript'])

  return (
    <View style={{ gap: 20, padding: 16 }}>
      <Text variant="label">Category filter</Text>
      <TagGroup tags={CATEGORIES} selected={filter} onChange={setFilter} />

      <Text variant="label">Skills</Text>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
        {skills.map(s => (
          <Tag key={s} label={s} onRemove={() => setSkills(prev => prev.filter(x => x !== s))} />
        ))}
      </View>
    </View>
  )
}

Action Sheet

Empty State