In progress

Tag

A non-interactive tag that displays a short, easily scannable keyword or status label.

• Figma
• Storybook
• Edit this page
• Create a new issue

Live

Code example

import { Tag } from '@yleisradio/yds-components-react';

<Tag variant="live" animate>Live</Tag>

Why to Use

A Tag provides a concise, high-visibility label that helps users quickly scan and categorize content, such as live broadcasts, opinions, or corporate items. It supports consistent visual communication across Yle services and saves space in user interfaces.

When to Use

Use a Tag to highlight short categorical or status information that aids quick recognition: content type (Opinion), real‑time state (Live), context (Chat), or sourcing (Yle Corporate). Tags are ideal for lists, cards, alongside headings, and compact metadata areas.

Do

• Use Tags to show short, clear labels such as Live, Opinion, Chat, or Yle Corporate.
• Keep text short (1–2 words) to ensure readability and avoid truncation.
• Choose the semantic variant that matches the meaning (for example, use live only for live content).
• Use the md size for Tags in Stories and Packages to maintain consistent appearance across Yle services.
• Provide accessible text if the visual label differs from needed screen reader context (e.g. via aria-label)..
• Apply Tags consistently across Yle products to build a familiar, unified visual language.

Don’t

• Don’t use multiple Tags with conflicting meanings (for example, live and rightnow variants together).
• Don’t make Tags interactive — use TagLink for clickable or navigational versions.
• Don’t write text in uppercase manually — rely on automatic text transform or use preventTransformUppercase if needed.
• Don’t animate variants other than live — the glow effect is reserved for live content only.
• Don’t use long or complex text — Tags are meant for short, scannable labels.

Key Props

Use the following props to customize the Tag component to fit your needs.

size

Controls vertical padding and height density. md offers more breathing room while sm is compact. Defaults to md.

Value	Example	Description
md	Medium	Medium size with comfortable padding.
sm	Small	Small size with comfortable padding.

Code example

import { Tag } from '@yleisradio/yds-components-react';

<Tag size="md">Medium</Tag>
<Tag size="sm">Small</Tag>

variant

Visual semantic meaning controlling background & text color. Use the variant matching the content’s status or classification.

Value	Example	Description
default	default	Generic categorization. eg. 'Uusi jakso' or 'Kaikki kaudet' in Areena.
live	live	Live broadcast or stream. Usually animated.
chat	chat	Active chat or discussion feature.
rightnow	rightnow	Immediate, breaking or currently happening content.
online	online	Online-only or digital-specific content.
opinion	opinion	Opinion, editorial or commentary content.
ylecorporate	ylecorporate	Yle corporate, brand or organizational context.

Code example

import { Tag } from '@yleisradio/yds-components-react';

<Tag variant="default">Default</Tag>
<Tag variant="live">Live</Tag>
<Tag variant="chat">Chat</Tag>
<Tag variant="rightnow">Right Now</Tag>
<Tag variant="online">Online</Tag>
<Tag variant="opinion">Opinion</Tag>
<Tag variant="ylecorporate">Yle</Tag>

preventTransformUppercase

By default the component applies an uppercase text transform derived from typography tokens. Set preventTransformUppercase to true to preserve original casing (e.g. for brand names or mixed case). Defaults to false.

Type	Example	Description
boolean	default	Preserves original casing.

Code example

import { Tag } from '@yleisradio/yds-components-react';
<Tag preventTransformUppercase={false}>live</Tag>
<Tag preventTransformUppercase>Live</Tag>

animate

Adds a subtle pulsing glow animation (prefers-reduced-motion respected) for the live variant to draw attention. Ignored for other variants. Defaults to false.

Type	Example	Description
boolean	default	Preserves original casing.

Code example

import { Tag } from '@yleisradio/yds-components-react';
<Tag variant="live" animate>Live (Animated)</Tag>

See more examples in Storybook

API Reference

Props

The Tag component accepts all standard HTML <span> attributes in addition to the following props:

Prop	Type	Required	Default	Description
size	TagSizeProp	No	'md'	Size of the tag
children	React.ReactNode	No	—
variant	TagVariantProp	No	'default'
preventTransformUppercase	boolean	No	false
animate	boolean	No	false

Type Definitions

export type TagSizeProp = 'md' | 'sm';
export type TagVariant =
  | 'default'
  | 'live'
  | 'chat'
  | 'rightnow'
  | 'online'
  | 'opinion'
  | 'ylecorporate';

export type TagVariantProp = TagVariant;

export interface TagDSProps {
  size?: TagSizeProp;
  children?: React.ReactNode;
  variant?: TagVariantProp;
  preventTransformUppercase?: boolean;
  animate?: boolean;
}

export type TagProps = HTMLAttributes<HTMLSpanElement> & TagDSProps;

Related Components

• TagLink: An interactive keyword link that provides navigational context for an article or content item
• TagFilter: Tag Filters are used to indicate selections and to allow their removal. They are typically used as a group.
• Badge: Badges are used to indicate a notification, item count, or other information relating to a navigation destination.