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 indicate content type or category (e.g. Opinion, Chat).
• Use Tags to communicate status or state (e.g. Live, Right now).
• Use Tags in lists, cards, headers, and compact metadata areas.
• Use Tags when the information is optional but helpful for scanning..

Don’t

• Don’t use Tags as interactive elements — use TagLink or Button instead.
• Don’t use Tags to convey complex or critical information on their own.
• Don’t use Tags where users are expected to make a choice or take action.
• Don’t use Tags when the information needs to be editable..

Content Guidelines

Tag labels must be short, scannable, and immediately understandable. Users should grasp the meaning without additional explanation.

Do

• Use short labels (ideally 1–2 words).
• Choose the semantic variant that matches the meaning of the content.
• Use preventTransformUppercase only when casing is meaningful (e.g. brand names).

Don’t

• Don’t manually force uppercase text — rely on the component’s default behavior.

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

Behavior

• Tags are non-interactive and purely informational.
• Tags are rendered inline and do not interrupt content flow.
• Visual styling is controlled by the selected variant.
• The live variant may use a subtle animation when animate is enabled.
• Animation respects the user’s prefers-reduced-motion setting.
• Tags do not manage state or user input.

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.