OTTODesign System

Components

Tag

A tag labels objects for quick recognition and navigation.

Configurator

LiveTag: variant, size per breakpoint and info icon
-20 % Rabatt
HTML
<oc-tag-v1 variant="sale">-20 % Rabatt</oc-tag-v1>

Usage

Anatomy

-20 % 1 2 3
  1. Label
  2. Info icon (optional, makes the tag interactive)
  3. Container
LiveAnatomy
HTML
<div class="anatomy" style="margin:40px 60px">
<span style="display:inline-block;zoom:2"><oc-tag-v1 variant="sale" size="100" show-info-icon>-20 %</oc-tag-v1></span>
<span class="anatomy-pin" style="left:30%;top:-15%">1</span>
<span class="anatomy-pin" style="left:80%;top:-15%">2</span>
<span class="anatomy-pin" style="left:100%;top:100%">3</span>
<ol class="anatomy-key"><li data-n="1">Label</li><li data-n="2">Info icon (optional, makes the tag interactive)</li><li data-n="3">Container</li></ol>

Variants

The tag is available in the following variants:

  • Sale: Use the sale tag for promotions, discounts or rewards.
  • Info-primary
  • Info-secondary
  • Sold-out: Use the sold-out tag if the item is sold out, the sold-out tag is not editable.

It is also available in the following functional colors:

  • Success
  • Error
  • Warning
  • Hint
  • Service

But you can also use other colors with these two variants:

  • custom-color-soft
  • custom-color-strong

All variants of the tag are available in the sizes 100, 50 and 25.

Neutral: size 100, 50, 25

-20 %
-20 %
-20 %
Neu
Neu
Neu
Bestseller
Bestseller
Bestseller
Ausverkauft
Ausverkauft
Ausverkauft

Functional: size 100, 50, 25

Lieferbar
Lieferbar
Lieferbar
Nicht lieferbar
Nicht lieferbar
Nicht lieferbar
Nur noch 2
Nur noch 2
Nur noch 2
Tipp
Tipp
Tipp
Service
Service
Service

Custom colour: size 100, 50, 25

Nachhaltig
Nachhaltig
Nachhaltig
Nachhaltig
Nachhaltig
Nachhaltig
Livesale, info-primary, info-secondary, sold-out, success, error, warning, hint, service, custom-color-soft and custom-color-strong in sizes 100, 50 and 25
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px">
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Neutral: size 100, 50, 25</p>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="100">-20 %</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="50">-20 %</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="25">-20 %</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="info-primary" size="100">Neu</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="info-primary" size="50">Neu</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="info-primary" size="25">Neu</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="info-secondary" size="100">Bestseller</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="info-secondary" size="50">Bestseller</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="info-secondary" size="25">Bestseller</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sold-out" size="100">Ausverkauft</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sold-out" size="50">Ausverkauft</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sold-out" size="25">Ausverkauft</oc-tag-v1></div>
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Functional: size 100, 50, 25</p>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="success" size="100">Lieferbar</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="success" size="50">Lieferbar</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="success" size="25">Lieferbar</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="error" size="100">Nicht lieferbar</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="error" size="50">Nicht lieferbar</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="error" size="25">Nicht lieferbar</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="warning" size="100">Nur noch 2</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="warning" size="50">Nur noch 2</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="warning" size="25">Nur noch 2</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="hint" size="100">Tipp</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="hint" size="50">Tipp</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="hint" size="25">Tipp</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="service" size="100">Service</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="service" size="50">Service</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="service" size="25">Service</oc-tag-v1></div>
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Custom colour: size 100, 50, 25</p>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="custom-color-strong" size="100" style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)">Nachhaltig</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="custom-color-strong" size="50" style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)">Nachhaltig</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="custom-color-strong" size="25" style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)">Nachhaltig</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="custom-color-soft" size="100" style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)">Nachhaltig</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="custom-color-soft" size="50" style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)">Nachhaltig</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="custom-color-soft" size="25" style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)">Nachhaltig</oc-tag-v1></div>

Behavior

States

Interactive tags have a focused state. The hover and active states are intentionally excluded because the interactivity is mainly included for legal reasons and is not emphasized.

Enabled

-20 %

Hover and focus it

-20 %
LiveStates
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">Enabled</p><oc-tag-v1 variant="sale" show-info-icon>-20 %</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">Hover and focus it</p><oc-tag-v1 variant="sale" show-info-icon>-20 %</oc-tag-v1></div>

Interaction

Although tags can be interactive, they should not be used for important actions. Add an info icon to the right to display legal reasons and clarify that the tag is interactive. Tags with info icons must be interactive.

-20 %
-20 %
-20 %
Livetag with icon
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="100" show-info-icon>-20 %</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="50" show-info-icon>-20 %</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="25" show-info-icon>-20 %</oc-tag-v1></div>

The hitboxes of tags sizes 50 and 25 are enlarged to prevent them from being undersized as per WCAG SC 2.5.8 Target Size.

-20 %
-20 %
-20 %

The whole tag is the hit area, at least 24 px high

Livehitboxes
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><span style="outline:1px dashed #f06;outline-offset:0;background:rgba(255,0,102,.15);display:inline-flex;align-items:center;min-height:24px"><oc-tag-v1 variant="sale" size="100" show-info-icon>-20 %</oc-tag-v1></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><span style="outline:1px dashed #f06;outline-offset:0;background:rgba(255,0,102,.15);display:inline-flex;align-items:center;min-height:24px"><oc-tag-v1 variant="sale" size="50" show-info-icon>-20 %</oc-tag-v1></span></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><span style="outline:1px dashed #f06;outline-offset:0;background:rgba(255,0,102,.15);display:inline-flex;align-items:center;min-height:24px"><oc-tag-v1 variant="sale" size="25" show-info-icon>-20 %</oc-tag-v1></span></div>
<p class="demo-label" style="margin-top:12px">The whole tag is the hit area, at least 24 px high</p>

Fitting

The height and width of the tag uses fit-content. However, the tag cannot exceed the width of its container. If the label is too long, it will be abbreviated and truncated since tags cannot span multiple lines.

Sale
Sale
Sale

Width and height fit the content

Livefitting
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1></div>
<p class="demo-label" style="margin-top:12px">Width and height fit the content</p>
super langes Label, das nicht passt

Too long for its container: the label is cut off with an ellipsis

Liveabbreviated tag
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><div style="position:relative;background:var(--oc-semantic-color-background-soft-blue, #cfe3f7);border-radius:16px;width:160px;height:140px"><div style="position:absolute;left:12px;right:8px;bottom:8px;display:flex"><oc-tag-v1 variant="sale" style="max-width:100%">super langes Label, das nicht passt</oc-tag-v1></div></div></div>
<p class="demo-label" style="margin-top:12px">Too long for its container: the label is cut off with an ellipsis</p>

Placement

You can place the tag either absolutely or inline. For example, an absolutely positioned tag overlays an image or similar element. An inline tag is included in the layout, such as within a text container.

-20 %
UVP€ 99,99€ 79,99
-20 %
Liveabsolute an inline placement
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><div style="position:relative;background:var(--oc-semantic-color-background-soft-blue, #cfe3f7);border-radius:16px;width:100%;max-width:360px;height:140px"><oc-tag-v1 variant="sale" style="position:absolute;right:8px;bottom:8px">-20 %</oc-tag-v1></div></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><div class="demo-stack gap-8" style="gap:4px"><span class="demo-copy">UVP</span><s class="demo-copy">€ 99,99</s><strong style="color:var(--oc-semantic-color-text-sale, #e20020)">€ 79,99</strong><div style="margin-top:8px"><oc-tag-v1 variant="sale">-20 %</oc-tag-v1></div></div></div>

If you place multiple tags next to each other, ensure a minimum gap of 8px for size 25 and 4px for size 50 to maintain a minimum hitbox of 24px. In general, a gap of at least 8px is recommended.

Size 25: min. 8 px

SaleSaleSaleSaleSaleSale

Size 50: min. 4 px

SaleSaleSaleSaleSaleSale

Size 100: 8 px

SaleSaleSaleSaleSaleSale
Livevertical and horizontal gaps of size 25, 50 and 100
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">Size 25: min. 8 px</p><div style="display:grid;grid-template-columns:repeat(3,auto);gap:8px"><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1></div></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">Size 50: min. 4 px</p><div style="display:grid;grid-template-columns:repeat(3,auto);gap:4px"><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="50">Sale</oc-tag-v1></div></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">Size 100: 8 px</p><div style="display:grid;grid-template-columns:repeat(3,auto);gap:8px"><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1><oc-tag-v1 variant="sale" size="100">Sale</oc-tag-v1></div></div>

Responsiveness

It is possible to use different tag sizes for different breakpoints.

Breakpoint S: size 25

Sale

This tag: size 25, size-l 100 (resize the window)

Sale
Livedifferent sizes on different beakpoints
HTML
<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">Breakpoint S: size 25</p><oc-tag-v1 variant="sale" size="25">Sale</oc-tag-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:16px;display:grid;place-items:center"><p class="demo-label" style="margin-bottom:8px">This tag: size 25, size-l 100 (resize the window)</p><oc-tag-v1 variant="sale" size="25" size-l="100">Sale</oc-tag-v1></div>

Best practices

sehr beliebt
DoUse static tags by default. Only use interactive tags when adding an info icon for legal reasons.
sehr beliebt
Don'tMake all tags interactive.
-20% Rabatt
DoUse the colors according to the tag variants.
-20% Rabatt
Don'tUse different colors than those in the tag variants.
-20 %
DoUse tags to highlight content. Use them sparingly.
-20 %NeuBestsellerOnline only
Don'tClutter your layout with tags.

Content guidelines

Do

Don't

DoDo use concise labels on a tag, ideally 2 words or less.
Don'tUse overly verbose labels.

Accessibility

For information on accessibility, refer to thetechnical documentation.

Status

Implementation

Note: For full technical documentation of this component, visit Storybook/tag.

Live demo

Unsere Empfehlungen

Sneaker aus Glattleder, Weiß
-20 %Bestseller

OTTO products

Sneaker aus Glattleder, Weiß

99,99 € 79,99 €

Sessel „Ilvy“ aus Bouclé, Eiche natur
Neu

andas

Sessel „Ilvy“ aus Bouclé, Eiche natur

Lieferbar in 2–3 Tagen

399,99 €

Over-Ear-Kopfhörer mit Noise Cancelling
sehr beliebt

Hanseatic

Over-Ear-Kopfhörer mit Noise Cancelling

Nur noch 3 da

59,99 €

LiveReal OTTO components, rendered by the OTTO component runtime
HTML
<p class="demo-title" style="font-size:1.25rem">Unsere Empfehlungen</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:24px 16px"><article style="display:flex;flex-direction:column;gap:2px;min-width:0"><div style="position:relative;border-radius:16px;overflow:hidden;background:#f3f3f3"><img src="/previews/imagery/samples/otto-product-still/product-sneaker.webp" alt="Sneaker aus Glattleder, Weiß" width="600" height="600" loading="lazy" style="display:block;width:100%;height:auto;margin:0;mix-blend-mode:multiply"><div style="position:absolute;left:12px;bottom:12px;display:flex;gap:4px;flex-wrap:wrap"><oc-tag-v1 variant="sale" size="50">-20 %</oc-tag-v1><oc-tag-v1 variant="info-secondary" size="50">Bestseller</oc-tag-v1></div></div><p class="demo-copy" style="margin-top:10px;color:var(--oc-semantic-color-text-secondary, #6d6d6d);text-transform:uppercase;font-size:0.75rem;letter-spacing:0.02em">OTTO products</p><p class="demo-copy">Sneaker aus Glattleder, Weiß</p><p class="demo-copy" style="margin-top:6px"><s style="color:var(--oc-semantic-color-text-secondary, #6d6d6d)">99,99 €</s> <strong style="color:var(--oc-semantic-color-text-sale, #e20020);font-size:1rem">79,99 €</strong></p></article><article style="display:flex;flex-direction:column;gap:2px;min-width:0"><div style="position:relative;border-radius:16px;overflow:hidden;background:#f3f3f3"><img src="/previews/imagery/samples/otto-product-still/product-armchair.webp" alt="Sessel „Ilvy“ aus Bouclé, Eiche natur" width="600" height="600" loading="lazy" style="display:block;width:100%;height:auto;margin:0;mix-blend-mode:multiply"><div style="position:absolute;left:12px;bottom:12px;display:flex;gap:4px;flex-wrap:wrap"><oc-tag-v1 variant="info-primary" size="50">Neu</oc-tag-v1></div></div><p class="demo-copy" style="margin-top:10px;color:var(--oc-semantic-color-text-secondary, #6d6d6d);text-transform:uppercase;font-size:0.75rem;letter-spacing:0.02em">andas</p><p class="demo-copy">Sessel „Ilvy“ aus Bouclé, Eiche natur</p><div style="margin-top:6px"><oc-tag-v1 variant="success" size="25">Lieferbar in 2–3 Tagen</oc-tag-v1></div><p class="demo-copy" style="margin-top:6px"><strong style="font-size:1rem">399,99 €</strong></p></article><article style="display:flex;flex-direction:column;gap:2px;min-width:0"><div style="position:relative;border-radius:16px;overflow:hidden;background:#f3f3f3"><img src="/previews/imagery/samples/otto-product-still/product-headphones.webp" alt="Over-Ear-Kopfhörer mit Noise Cancelling" width="600" height="600" loading="lazy" style="display:block;width:100%;height:auto;margin:0;mix-blend-mode:multiply"><div style="position:absolute;left:12px;bottom:12px;display:flex;gap:4px;flex-wrap:wrap"><oc-tag-v1 variant="info-primary" size="50" show-info-icon>sehr beliebt</oc-tag-v1></div></div><p class="demo-copy" style="margin-top:10px;color:var(--oc-semantic-color-text-secondary, #6d6d6d);text-transform:uppercase;font-size:0.75rem;letter-spacing:0.02em">Hanseatic</p><p class="demo-copy">Over-Ear-Kopfhörer mit Noise Cancelling</p><div style="margin-top:6px"><oc-tag-v1 variant="warning" size="25">Nur noch 3 da</oc-tag-v1></div><p class="demo-copy" style="margin-top:6px"><strong style="font-size:1rem">59,99 €</strong></p></article></div>

Code

Version Tag Status API
v1 <oc-tag-v1> Stable, allowed for generation TagV1

Overview (v1)

Tag

The tag component serves as a versatile label for various content types. It offers attributes for adjusting size, breakpoint-specific sizes, and offers for a wide range of styles. Additionally, it supports an interactive clickable info icon, enhancing functionality and user interaction.

Default variation
Label
HTML
<oc-tag-v1 size="100" variant="info-primary">Label</oc-tag-v1>
Configuration

The tag component offers the styling variants error, hint, info-primary, info-secondary, sale, sold-out, success, and warning. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see how the changes affect the component in real-time.

Usage guidelines

Before integrating the tag component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Layout considerations

This component has an extended hitbox. The touch area extends beyond its bounding box, so it may be activated when the user clicks or taps outside the visible component area. Ensure sufficient margin around the component to prevent unintended interactions with adjacent elements.

Accessibility

The tag component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Use oc-aria-label

To make the tag recognizable for screen readers, use the default slot to provide a clear and descriptive label. Use the aria-label attribute on the label to provide additional context if the visible label is not sufficient. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Further reading

Configuration (v1)

Tag configuration

Configure the tag component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Label
HTML
<oc-tag-v1 size="100" variant="info-primary">Label</oc-tag-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Tag v1 API

API: <oc-tag-v1> (TagV1)

The tag component serves as a versatile label for various content types. It offers attributes for adjusting size, breakpoint-specific sizes, and offers for a wide range of styles. Additionally, it supports an interactive clickable info icon, enhancing functionality and user interaction.

Attributes / properties
Attribute Type Default Required Description
variant "error" | "success" | "warning" | "hint" | "sale" | "custom-color-strong" | "custom-color-soft" | "info-primary" | "sold-out" | "info-secondary" | "service" "info-primary" no Sets the main styling of the tag.
size "50" | "100" | "25" "100" no Sets the size of the tag.
size-m "50" | "100" | "25" undefined no Sets the size of the tag for breakpoint m.
size-l "50" | "100" | "25" undefined no Sets the size of the tag for breakpoint l.
show-info-icon boolean false no Displays an clickable info icon inside the tag.
oc-aria-label string undefined no Sets the ARIA label of the tag.
Slots
Slot Required Description
default yes Sets the text content of the tag label.
Events
Event Detail type Description
oc-property-change OcTagV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.
CSS custom properties
Custom property Default Description
--background-color undefined Sets a custom background color through a CSS variable.

Note: The preferred way of using colors is via design tokens instead of hex values.

Note: This CSS variable only applies when using variant="custom-color-strong" or variant="custom-color-soft".
--text-color undefined Sets a custom text color through a CSS variable.

Note: The preferred way of using colors is via design tokens instead of hex values.

Note: This CSS variable only applies when using variant="custom-color-strong" or variant="custom-color-soft".

Variations (v1)

Variations

Listed below are the most common variations of the tag component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-tag-variations--default · tags: components

The default configuration of the tag uses the info-primary variant and size=100.

Label
HTML
<oc-tag-v1 size="100" variant="info-primary">Label</oc-tag-v1>
Interactive tag via info icon

Story: components-tag-variations--show-info-icon · tags: components

The show-info-icon attribute set to true will display an info icon on the right side of the tag. With this attribute set, the tag becomes clickable and focusable e.g., via keyboard. This behavior is available for all variants. To test it, click on the following canvas and press the Tab key.

Args: show-info-icon=true

Label
HTML
<oc-tag-v1 size="100" variant="info-primary" show-info-icon>Label</oc-tag-v1>
Responsive sizing

Story: components-tag-variations--responsive-size · tags: components

The size-m and size-l attributes enable responsive sizing, adjusting the size of the tag for medium and large viewports, respectively.

Fixed size Responsive size
HTML
<div style="display: flex; gap: 8px; margin-top: 4px">
<oc-tag-v1 variant="info-primary" size="50">Fixed size</oc-tag-v1>
<oc-tag-v1 variant="info-primary" size="25" size-m="50" size-l="100"
  >Responsive size</oc-tag-v1
>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Responsive sizing",
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <div style="display: flex; gap: 8px; margin-top: 4px">
      <oc-tag-v1 variant="info-primary" size="50">Fixed size</oc-tag-v1>
      <oc-tag-v1 variant="info-primary" size="25" size-m="50" size-l="100"
        >Responsive size</oc-tag-v1
      >
    </div>`;
  }
}
Custom Color Strong

Story: components-tag-variations--custom-color-strong · tags: components

The custom-color-strong variant with custom colors for background and text

Label
HTML
<div style="display: flex; gap: 8px; margin-top: 4px">
<oc-tag-v1
  style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)"
  variant="custom-color-strong"
  size="50"
  >Label</oc-tag-v1
>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Custom Color Strong",
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <div style="display: flex; gap: 8px; margin-top: 4px">
      <oc-tag-v1
        style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)"
        variant="custom-color-strong"
        size="50"
        >Label</oc-tag-v1
      >
    </div>`;
  }
}
Custom Color Soft

Story: components-tag-variations--custom-color-soft · tags: components

The custom-color-strong variant with custom colors for background and text

Label
HTML
<div style="display: flex; gap: 8px; margin-top: 4px">
<oc-tag-v1
  style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)"
  variant="custom-color-soft"
  size="50"
  >Label</oc-tag-v1
>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Custom Color Soft",
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <div style="display: flex; gap: 8px; margin-top: 4px">
      <oc-tag-v1
        style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)"
        variant="custom-color-soft"
        size="50"
        >Label</oc-tag-v1
      >
    </div>`;
  }
}
Demo: overflow

Story: components-tag-variations--overflow · tags: components

A demo showcasing the truncation of an overly long tag label set via the default slot.

Args: defaultSlot=(see snippet)

<div style="max-width: 500px">
  <oc-tag-v1 ${spreadProps(props)}>Tags are not intended to hold long strings of text. If you try to use them that way anyway, the text will be truncated automatically.</oc-tag-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: overflow",
  args: {
    defaultSlot: "Tags are not intended to hold long strings of text. If you try to use them that way anyway, the text will be truncated automatically."
  },
  render({
    defaultSlot,
    ...props
  }) {
    return html` <div style="max-width: 500px">
      <oc-tag-v1 ${spreadProps(props)}>${unsafeHTML(defaultSlot)}</oc-tag-v1>
    </div>`;
  }
}