Tag

Installation

npx usmds add tag

Usage

import { Tag } from '@components/Tag';
 
<Tag label="TAG" />

Props

Tag

Extends View props.

Prop	Type	Default	Description
label	`string`	-	The text content of the tag.
size	`'default' \| 'big'`	`'default'`	The size variant of the tag.
className	`string`	-	Additional Tailwind classes to apply.

Examples

Default Size

<Tag label="TAG" />

Big Size

<Tag label="TAG" size="big" />

Common Use Cases

<View className="flex-1 items-center justify-center gap-5">
  <Tag label="new" />
  <Tag label="beta" size="big" />
  <Tag label="pro" />
  <Tag label="sale" size="big" />
</View>

Styling

The Tag component uses Tailwind CSS classes for styling through class-variance-authority (cva). Default styling includes:

Container dimensions:
- Default: min-width 43px × height 18px
- Big: min-width 43px × height 24px
Background color: gray-60
Rounded corners (2px)
Text styling:
- Default: 14px font size, 14px line height
- Big: 16px font size, 16px line height
White text color
Centered content
Consistent padding:
- Default: 2px vertical, 8px horizontal
- Big: 4px vertical, 8px horizontal

Variants

The tag has two size variants:

Default: Compact size for general use
Big: Larger size for more prominence

Accessibility

The Tag component:

Uses semantic text structure
Maintains proper text contrast on gray background
Provides adequate touch target sizes
Ensures readable text sizes
Uses consistent spacing and padding

Tag

On this page