---
title: Tag (React) - USWDS + Tailwind
description: Draw attention to new or categorized content with tags in several
  sizes and color styles.
---

# Tag

Draw attention to new or categorized content with tags in several sizes and color styles.

## Examples

### Default

```tsx
import { Tag } from '@uswds-tailwind/react/tag'

export default function TagDemo() {
  return <Tag>New</Tag>
}
```

### Large

```tsx
import { Tag } from '@uswds-tailwind/react/tag'

export default function TagLargeDemo() {
  return <Tag size="lg">New</Tag>
}
```

### Vivid orange

```tsx
import { Tag } from '@uswds-tailwind/react/tag'

export default function TagVividOrangeDemo() {
  return <Tag variant="vivid-orange">New</Tag>
}
```

### Light gray

```tsx
import { Tag } from '@uswds-tailwind/react/tag'

export default function TagLightGrayDemo() {
  return <Tag variant="light-gray">Topic</Tag>
}
```

## Component API

Tag is a styled text label.

### Tag `<span>`

Accepts native span props.

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant` | `default \| vivid-orange \| light-gray` | `default` | Selects the color treatment. |
| `size` | `md \| lg` | `md` | Selects the text size. |