Skip to main content

Tag

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
New
tag-demo.tsx
import { Tag } from '@uswds-tailwind/react/tag'
export default function TagDemo() {
return <Tag>New</Tag>
}

Large

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
New
tag-large-demo.tsx
import { Tag } from '@uswds-tailwind/react/tag'
export default function TagLargeDemo() {
return <Tag size="lg">New</Tag>
}

Vivid orange

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
New
tag-vivid-orange-demo.tsx
import { Tag } from '@uswds-tailwind/react/tag'
export default function TagVividOrangeDemo() {
return <Tag variant="vivid-orange">New</Tag>
}

Light gray

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Topic
tag-light-gray-demo.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.

PropTypeDefaultDescription
variantdefault | vivid-orange | light-graydefaultSelects the color treatment.
sizemd | lgmdSelects the text size.