---
title: Tire Label
description: "The class arrows of the EU tire label beside a price: fuel efficiency, wet grip and rolling noise, linked to the label and the product information sheet"
visibility: guest
draft: false
---

# Tire Label

The arrows a shop shows beside the price of a tire that carries an EU tire label: the fuel efficiency class, the wet grip class and the external rolling noise class, each in the color the label gives it and with the range of its scale, linked to the label and to the product information sheet. It draws the simplified display the European Commission proposed for the tire label of Regulation (EU) 2020/740, for a product card and a product page alike, and is the counterpart of the [energy label](/components/energy-label) for tires.

## Basic Usage

`fuel`, `wet-grip` and `noise` are the classes on the tire's label, `href` the address of the label itself and `sheet` the address of its product information sheet.

:::preview{title="A tire label with both links"}
<x-wirekit::tire-label fuel="B" wet-grip="A" noise="B" href="#tire-label" sheet="#product-information-sheet" />
:::

## Beside a Price

The classes stand in the size of the price. Give the arrows the `size` of the [price](/components/price) beside them, and place them close to the price, where the regulation asks for the label.

:::preview{title="A price and its tire label in the same size"}
<x-wirekit::row gap="sm" align="center" wrap>
    <x-wirekit::price :amount="129" currency="EUR" size="lg" />
    <x-wirekit::tire-label fuel="C" wet-grip="B" noise="A" size="lg" href="#tire-label" sheet="#product-information-sheet" />
</x-wirekit::row>
:::

## Every Class

Fuel efficiency runs from dark green for class A to red for class E, wet grip from dark blue to light blue. The noise classes A to C are black on white, as they are on the label.

:::preview{title="The classes of the three scales"}
<x-wirekit::stack gap="lg">
    <x-wirekit::row gap="lg" wrap>
        <x-wirekit::tire-label fuel="A" href="#fuel-a" />
        <x-wirekit::tire-label fuel="B" href="#fuel-b" />
        <x-wirekit::tire-label fuel="C" href="#fuel-c" />
        <x-wirekit::tire-label fuel="D" href="#fuel-d" />
        <x-wirekit::tire-label fuel="E" href="#fuel-e" />
    </x-wirekit::row>
    <x-wirekit::row gap="lg" wrap>
        <x-wirekit::tire-label wet-grip="A" href="#grip-a" />
        <x-wirekit::tire-label wet-grip="B" href="#grip-b" />
        <x-wirekit::tire-label wet-grip="C" href="#grip-c" />
        <x-wirekit::tire-label wet-grip="D" href="#grip-d" />
        <x-wirekit::tire-label wet-grip="E" href="#grip-e" />
    </x-wirekit::row>
    <x-wirekit::row gap="lg" wrap>
        <x-wirekit::tire-label noise="A" href="#noise-a" />
        <x-wirekit::tire-label noise="B" href="#noise-b" />
        <x-wirekit::tire-label noise="C" href="#noise-c" />
    </x-wirekit::row>
</x-wirekit::stack>
:::

## The Noise in Decibels

The external rolling noise is shown with its class and its value. `noise-db` adds the decibels from the label after the loudspeaker.

:::preview{title="The noise class with its value"}
<x-wirekit::tire-label fuel="B" wet-grip="A" noise="B" :noise-db="71" href="#tire-label" sheet="#product-information-sheet" />
:::

## In a Narrow Column

A label wider than its column wraps, the arrows first and the link to the sheet last. On a touch screen each arrow takes a 44px target, and the rows of a wrapped label stand half a target apart, so no target reaches into the next row.

:::preview{title="A tire label that wraps in a narrow column"}
<x-wirekit::stack style="max-width: 10rem;">
    <x-wirekit::tire-label fuel="B" wet-grip="A" noise="B" href="#tire-label" sheet="#product-information-sheet" />
</x-wirekit::stack>
:::

## Opening the Label

Each arrow opens the label on a click, a hover or a tap: `href` opens it as a new page, and `new-tab` opens the label and the sheet in another tab instead, which each link then says to a screen reader. Link the label the tire's supplier provides, or the one in the EU product database.

```blade
<x-wirekit::tire-label
    :fuel="$tire->fuel_class"
    :wet-grip="$tire->wet_grip_class"
    :noise="$tire->noise_class"
    :noise-db="$tire->noise_db"
    :href="$tire->labelUrl"
    :sheet="$tire->productSheetUrl"
    new-tab
/>
```

A class a scale does not have is reported while you develop, and in production that arrow is left out rather than drawn with another class, since an arrow that names a class the tire does not have tells a buyer something false about it. A parameter you leave out draws no arrow.

## What the Regulation Asks For

Regulation (EU) 2020/740 lets a shop make the tire label available in a nested display on the web, close to the price (Articles 4 and 6), and does not prescribe the image that opens it. The arrows follow the format the European Commission proposed for that image in June 2026 (COM(2026) 565, Annex II, amending Annex IV of the regulation): a class arrow per parameter with the letter centered in its rectangular part, a border, the color of the class on the full label, the letter in Noto Sans Bold, white with a black outline, in the size of the price, the range of the classes in Noto Sans in black on white, and the parameter's pictogram. The arrows ask for Noto Sans first and fall back to the body face where it is not installed. WireKit ships Noto Sans as a [font preset](/components/fonts): a page that loads it, with `<x-wirekit::fonts sans="noto-sans" />` for instance, draws the arrows in it. The colors are the CMYK values of the regulation's Annex II in the sRGB the EU product database draws the label with, the same in light and dark mode.

Two things stay with your shop:

- **The label itself.** The arrows only open it.
- **Where it stands.** Close to the price, on every page that shows the price.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `fuel` | `string\|null` | `null` | The fuel efficiency class on the tire's label, `A` to `E` |
| `wet-grip` | `string\|null` | `null` | The wet grip class on the tire's label, `A` to `E` |
| `noise` | `string\|null` | `null` | The external rolling noise class on the tire's label, `A` to `C` |
| `noise-db` | `int\|null` | `null` | The external rolling noise in decibels, shown after the loudspeaker — see [The Noise in Decibels](#the-noise-in-decibels) |
| `href` | `string\|null` | `null` | The address of the label, an image or a PDF. Each arrow links to it. Without it the arrows are images only, and the label has to be shown in full elsewhere |
| `sheet` | `string\|null` | `null` | The address of the product information sheet, linked as "Product information sheet" in the application's language |
| `size` | `string` | `'md'` | The size of the classes, as on `price`: `xs`, `sm`, `md`, `lg`, `xl` |
| `new-tab` | `bool` | `false` | Opens the label and the sheet in another tab |
| `scope` | `string\|null` | `null` | Scoped personalization name |

## Accessibility

- Each arrow is an image, hidden from assistive technology. The link around it carries its meaning in the words the format gives it: "Fuel efficiency class is B (range A-E). Show the tire label." Without `href` the same sentence stands in its place
- The noise sentence names the decibels as well when `noise-db` is given
- On a touch screen each arrow takes a 44px target that paints nothing, and a wrapped label keeps its rows half a target apart, so a target never takes a tap meant for the arrow or the link next to it
- The classes of fuel efficiency and wet grip are white with a black edge on their color, so they stay readable on the yellow and the light blue, and every range is black on white
- The link to the product information sheet is visible text in the application's language
- Forced colors leave the arrows in their colors, as they leave a picture: the color is what the label requires them to show
- With `new-tab` every link announces that it opens another tab

## Keyboard Interaction

| Key | Action |
| --- | --- |
| `Tab` / `Shift+Tab` | Move from arrow to arrow, then to the product information sheet |
| `Enter` | Open the label from an arrow, or the sheet from its link |

*All of them are links with the browser's own keyboard behavior.*

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-tire-fuel-1` … `--color-wk-tire-fuel-5` | The color of the fuel efficiency arrow, from class A to class E |
| `--color-wk-tire-grip-1` … `--color-wk-tire-grip-5` | The color of the wet grip arrow, from class A to class E |
| `--text-wk-xs` / `--text-wk-sm` / `--text-wk-md` / `--text-wk-lg` / `--text-wk-xl` | The size of the classes per `size` |
| `--font-wk-sans` | The classes and ranges where Noto Sans is not installed |
| `--gap-wk-sm` / `--gap-wk-xs` | The space between the arrows and the link to the sheet |