---
title: "Item Label | GoodBarber's Design System"
description: "The Item Label is the text of a navigation entry in GoodBarber apps: one size to choose, and the app adapts it to mobile, tablet and desktop."
canonical_url: "https://www.goodbarber.com/uxdesign/item-label/"
lang: fr
---

# Item Label | GoodBarber's Design System

[Design System](https://fr.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://fr.goodbarber.com/uxdesign/](https://fr.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://fr.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Elements](/uxdesign/ui-elements/)
* [Item](/uxdesign/item/)
* [Item Icon](/uxdesign/item-icon/)
* [Item Label](/uxdesign/item-label/)
* [Item Indicator](/uxdesign/item-indicator/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)
* [TabBar](/uxdesign/tabbar/)

# Item Label

UI Elements

The Item Label is the text of a navigation entry: it names the destination, next to the icon or on its own.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item-label.bcddd61cdf4a.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item-label.bcddd61cdf4a.mp4)

## Introduction

The Item Label is the text of a navigation entry: it displays the title or the name of the destination. It is one of the child elements an [Item](/uxdesign/item/) may contain, with the [Item Icon](/uxdesign/item-icon/) and the [Item Indicator](/uxdesign/item-indicator/).

## Anatomy

### The text layer

The Item Label is made of a text layer, governed by its own padding.

![The Item Label: a single text layer and its padding](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemLabel-Anatomy-Layer.e749edefeb38.png)

*The Item Label: a single text layer and its padding*

### Font size

The label comes in three sizes: **small, medium and large**. Depending on the configuration, the font size then adapts automatically to each platform: mobile, tablet and desktop. The three sizes are anchored on the heading6 level of the [typographic scale](/uxdesign/typography/) of the app.

![The three sizes of the Item Label, adapted per device](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemLabel-Anatomy-FontSize.44c8be1c4eb4.png)

*The three sizes of the Item Label, adapted per device*

## Properties

### Font family

The label uses the [Font](/uxdesign/atom-font/) atom of the design system, which allows the full customization of the typography and of the size across devices.

![The label in different font families](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemLabel-Properties-FontFamily.4732169950aa.png)

*The label in different font families*

### Color

The label has its own color, and the selected state of the [Item](/uxdesign/item/) can change it.

![The label has its own color](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemLabel-Properties-Color.1c625cef6f2f.png)

*The label has its own color*