---
title: Actions sur les composants DSFR
sitemap:
  noindex: true
---

## Actions sur les composants DSFR

Les composants du DSFR envoient automatiquement des actions prédéfinies.

Le tableau, ci-dessous, regroupe les différentes actions remontées à Eulérian pour chaque composant du DSFR.
Vous trouverez pour chaque composant une colonne :

  * **Composant** : Nom du composant
  * **Element** : Selecteur CSS de l'élement HTML traqué
  * **Type** : Type d'action envoyé à Eulérian
  * **Breakpoints** : Si renseigné, l'action est définie uniquement sur ces [breakpoints] de largeur de page. Si vide, sur tous les [breakpoints].
  * **Valeur** : Valeur de l'action envoyée à Eulérian
  * **Label** : Valeurs possibles du label, dans l'ordre de priorité, en fonction de leur présence


| **Composant** | **Elément**                                                                                                 |            **Type**             | **Breakpoints** |        **Valeur**        | **Label**                                                                                                                                                    |
|:--------------|:------------------------------------------------------------------------------------------------------------|:-------------------------------:|:---------------:|:------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------|
| accordion     | .fr-collapse                                                                                                |            DISCLOSE             |                 |    label<sup>2</sup>     | <ul><li>titre de l’accordéon </li><li>libellé du bouton</li><li>`accordéon`</li></ul>                                                                        |
| alert         | .fr-alert                                                                                                   |                                 |                 |                          | <ul><li>Titre de l’alerte</li><li>`alerte`</li></ul>                                                                                                         |
| badge         | .fr-badge                                                                                                   |                                 |                 |                          | <ul><li>Libellé du badge</li><li>`badge`</li></ul>                                                                                                           |
| breadcrumb    | .fr-collapse                                                                                                |                                 | [MD] [LG] [XL]  |    label<sup>2</sup>     | <ul><li>`fil d’ariane`</li></ul>                                                                                                                             |
|               | .fr-collapse                                                                                                |            DISCLOSE             |   [XS]  [SM]    |    label<sup>2</sup>     | <ul><li>`fil d’ariane`</li></ul>                                                                                                                             |
|               | .fr-breadcrumb__link[href]                                                                                  |            INTERNAL             |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien</li><li>`lien fil d'ariane`</li></ul>                                                                                                |
| button        | .fr-btn                                                                                                     |              CLICK              |                 |    label<sup>2</sup>     | <ul><li>Libellé du bouton</li><li>`button`</li></ul>                                                                                                         |
|               | a.fr-btn[href]                                                                                              | INTERNAL / EXTERNAL<sup>1</sup> |                 |    label<sup>2</sup>     | <ul><li>Libellé du bouton</li><li>`button`</li></ul>                                                                                                         |
|               | a.fr-btn[download]                                                                                          |            DOWNLOAD             |                 |    label<sup>2</sup>     | <ul><li>Libellé du bouton</li><li>`button`</li></ul>                                                                                                         |
| callout       | .fr-callout                                                                                                 |                                 |                 |    label<sup>2</sup>     | <ul><li>Titre de la mise en avant</li><li>`mise en avant`</li></ul>                                                                                          |
| card          | .fr-card (sans lien)                                                                                        |                                 |                 |    label<sup>2</sup>     | <ul><li>Titre de la carte</li><li>heading de la carte</li><li>`carte`</li></ul>                                                                              |
|               | .fr-card (avec lien)                                                                                        | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>Titre de la carte</li><li>heading de la carte</li><li>`carte`</li></ul>                                                                              |
|               | .fr-card (avec lien + attribut download)                                                                    |            DOWNLOAD             |                 |     href<sup>4</sup>     | <ul><li>Titre de la carte</li><li>heading de la carte</li><li>`carte`</li></ul>                                                                              |
| checkbox      | .fr-checkbox-group [type="checkbox"]                                                                        |         CHECK / UNCHECK         |                 |    value<sup>3</sup>     | <ul><li>Libellé de la case à cocher</li><li>`case à cocher`</li></ul>                                                                                        |
| connect       | .fr-connect                                                                                                 |              CLICK              |                 |    label<sup>2</sup>     | <ul><li>`FranceConnect`</li></ul>                                                                                                                            |
|               | .fr-connect--plus                                                                                           |              CLICK              |                 |    label<sup>2</sup>     | <ul><li>`FranceConnect+`</li></ul>                                                                                                                           |
|               | .fr-connect + * a                                                                                           |              CLICK              |                 |    label<sup>2</sup>     | <ul><li>Libellé du lien</li><li>`Qu'est-ce que FranceConnect ?`</li></ul>                                                                                    |
| consent       | .fr-consent-banner                                                                                          |                                 |                 |                          | <ul><li>`Gestionnaire de consentement`</li></ul>                                                                                                             |
| content       | .fr-content-media                                                                                           |                                 |                 |                          | <ul><li>`aria-label` du bloc</li><li>`alt` de l'image</li><li>`aria-label` de l'image</li><li>`title` de la vidéo</li><li>`aria-label` de la video</li></ul> |
| download      | .fr-download__link [download]                                                                               |            DOWNLOAD             |                 |     href<sup>4</sup>     | <ul><li>libellé du bloc de téléchargement</li><li>`téléchargement`</li></ul>                                                                                 |
| follow        | .fr-follow__newsletter                                                                                      |            SUBSCRIBE            |                 |    label<sup>2</sup>     | <ul><li>`lettre d'information et réseaux sociaux`</li></ul>                                                                                                  |
| footer        | .fr-footer                                                                                                  |                                 |                 |                          | <ul><li>Pied de page</li></ul>                                                                                                                               |
|               | .fr-footer__content-link,<br/>.fr-footer__bottom-link,<br/>.fr-footer__top-link,<br/>.fr-footer__partners-link | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien</li><li>`lien pied de page`</li></ul>                                                                                                |
| header        | .fr-header                                                                                                  |                                 |                 |                          | <ul><li>`En-tête`</li></ul>                                                                                                                                  |
|               | .fr-header__tools-links .fr-btn                                                                             | INTERNAL / EXTERNAL<sup>1</sup> |    [LG] [XL]    |     href<sup>4</sup>     | <ul><li>Libellé du bouton</li><li>`button`</li></ul>                                                                                                         |
|               | .fr-header__menu-links .fr-btn                                                                              | INTERNAL / EXTERNAL<sup>1</sup> | [XS] [SM] [MD]  |     href<sup>4</sup>     | <ul><li>Libellé du bouton</li><li>`button`</li></ul>                                                                                                         |
|               | .fr-header__menu .fr-modal                                                                                  |            DISCLOSE             | [XS] [SM] [MD]  |    label<sup>2</sup>     | <ul><li>`Menu`</li></ul>                                                                                                                                     |
|               | .fr-header__search .fr-modal                                                                                |            DISCLOSE             | [XS] [SM] [MD]  |    label<sup>2</sup>     | <ul><li>`Rechercher`</li></ul>                                                                                                                               |
| highlight     | .fr-highlight                                                                                               |                                 |                 |                          | <ul><li>`Mise en exergue`</li></ul>                                                                                                                          |
| input         | .fr-input-group                                                                                             |                                 |                 |                          | <ul><li>Libellé du champs de saisie</li><li>`champs de saisie`</li></ul>                                                                                     |
| link          | .fr-link                                                                                                    |              CLICK              |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien</li><li>`lien`</li></ul>                                                                                                             |
|               | .fr-link[href]                                                                                              | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien</li><li>`lien`</li></ul>                                                                                                             |
|               | .fr-link[download]                                                                                          |            DOWNLOAD             |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien</li><li>`lien`</li></ul>                                                                                                             |
| modal         | .fr-modal                                                                                                   |            DISCLOSE             |                 |    label<sup>2</sup>     | <ul><li>titre de la modale</li><li>heading de la modale</li><li>libellé du bouton de la modale</li><li>`modale`</li></ul>                                    |
| navigation    | .fr-nav__link                                                                                               | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien</li><li>`lien de navigation`</li></ul>                                                                                               |
| notice        | .fr-notice                                                                                                  |                                 |                 |                          | <ul><li>Titre du bandeau d’information importante</li><li>`bandeau d’information importante`</li></ul>                                                       |
| pagination    | .fr-pagination__link                                                                                        |      INTERNAL<sup>1</sup>       |                 |     href<sup>4</sup>     | <ul><li>Libellé du lien de pagination</li><li>`lien pagination`</li></ul>                                                                                    |
| quote         | .fr-quote                                                                                                   |                                 |                 |                          | <ul><li>libellé de la citation</li><li>`citation`</li></ul>                                                                                                  |
| radio         | .fr-radio-group [type="radio"]                                                                              |              CHECK              |                 |    value<sup>3</sup>     | <ul><li>légende du fieldset › Libellé du bouton radio sélectionné</li></ul>                                                                                  |
| search        | .fr-search-bar .fr-btn                                                                                      |             SEARCH              |                 | input value<sup>5</sup>  | <ul><li>`barre de recherche`</li></ul>                                                                                                                       |
| select        | .fr-select-group                                                                                            |             CHANGE              |                 | option label<sup>6</sup> | <ul><li>Libellé de la liste</li><li>`liste déroulante`</li></ul>                                                                                             |
| share         | .fr-share                                                                                                   |                                 |                 |                          | <ul><li>Libellé du titre des boutons de partage</li><li>`boutons de partage`</li></ul>                                                                       |
| sidemenu      | .fr-sidemenu__link                                                                                          | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>libellé du lien</li><li>`lien menu latéral`</li></ul>                                                                                                |
| stepper       | .fr-stepper                                                                                                 |                                 |                 |                          | <ul><li>`indicateur d'étapes`</li></ul>                                                                                                                      |
| summary       | .fr-summary__link                                                                                           |      INTERNAL<sup>1</sup>       |                 |     href<sup>4</sup>     | <ul><li>libellé du lien</li><li>`lien sommaire`</li></ul>                                                                                                    |
| tab           | .fr-tabs                                                                                                    |            DISCLOSE             |                 |    label<sup>2</sup>     | <ul><li>titre de l’onglet </li><li>libellé du bouton</li><li>`onglet`</li></ul>                                                                              |
| table         | .fr-table                                                                                                   |                                 |                 |                          | <ul><li>caption du tableau</li><li>``</li></ul>                                                                                                              |
| tag           | .fr-tag                                                                                                     |                                 |                 |                          | <ul><li>libellé du tag</li><li>`tag`</li></ul>                                                                                                               |
|               | button.fr-tag                                                                                               |              CLICK              |                 |    label<sup>2</sup>     | <ul><li>libellé du tag</li><li>`tag`</li></ul>                                                                                                               |
|               | a.fr-tag[href]                                                                                              | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>libellé du tag</li><li>`tag`</li></ul>                                                                                                               |
|               | .fr-tag--dismiss                                                                                            |             DISMISS             |                 |    label<sup>2</sup>     | <ul><li>libellé du tag</li><li>`tag`</li></ul>                                                                                                               |
|               | .fr-tag[aria-pressed]                                                                                       |        PRESS / RELEASE          |                 |    label<sup>2</sup>     | <ul><li>libellé du tag</li><li>`tag`</li></ul>                                                                                                               |
| tile          | .fr-tile (sans lien)                                                                                        |                                 |                 |    label<sup>2</sup>     | <ul><li>titre de la tuile</li><li>heading de la tuile</li><li>`tuile`</li></ul>                                                                              |
|               | .fr-tile (avec lien)                                                                                        | INTERNAL / EXTERNAL<sup>1</sup> |                 |     href<sup>4</sup>     | <ul><li>titre de la tuile</li><li>heading de la tuile</li><li>`tuile`</li></ul>                                                                              |
|               | .fr-tile (avec lien + attribut download)                                                                    |            DOWNLOAD             |                 |     href<sup>4</sup>     | <ul><li>titre de la tuile</li><li>heading de la tuile</li><li>`tuile`</li></ul>                                                                              |
| toggle        | .fr-toggle [type="checkbox"]                                                                                |         CHECK / UNCHECK         |                 |    value<sup>3</sup>     | <ul><li>libellé de l'interrupteur</li><li>`interrupteur`</li></ul>                                                                                           |
| transcription | .fr-transcription .fr-collapse                                                                              |            DISCLOSE             |                 |    label<sup>2</sup>     | <ul><li>titre de la transcription </li><li>libellé du bouton</li><li>`transcription`</li></ul>                                                               |
| translate     | .fr-translate .fr-collapse                                                                                  |            DISCLOSE             |                 |    label<sup>2</sup>     | <ul><li>titre du sélecteur de langue </li><li>libellé du bouton</li><li>`sélecteur de langue`</li></ul>                                                      |
| upload        | .fr-upload                                                                                                  |             CHANGE              |                 |  extension<sup>7</sup>   | <ul><li>Libellé de l'ajout de fichier</li><li>`Ajout de fichier`</li></ul>                                                                                   |

<sup>1</sup> Type INTERNAL si lien interne (meme domaine), ou EXTERNAL si lien externe, déterminé par le `href`. Dans les autres cas, type CLICK

<sup>2</sup> Voir le label associé dans la colonne "label" du tableau

<sup>3</sup> Attribut `value` de l'élément. A défaut de valeur, renvoi le label<sup>2</sup>.

<sup>4</sup> Attribut `href` de l'élément. Doit avoir une valeur pour être envoyé.

<sup>5</sup> Valeur entrée dans le champs de saisie

<sup>6</sup> label des options sélectionnées à l'événement change

<sup>7</sup> extensions des fichiers ajoutés au téléversement

* * *

> [!TIP]
> Il est possible de retirer des actions à remonter, en utilisant l'attribut `data-fr-analytics-action` sur un élément instancié d’un composant.
> - Avec `data-fr-analytics-action="false"`, l'action est initialisée mais non activée. L'élément est traqué, mais aucune action n'est envoyée à Eulérian lors de l'interaction.
> - Avec `data-fr-analytics-action="reduce"`, l'action n'est pas initialisée. L'élément n'est pas traqué, et aucune action n'est envoyée à Eulérian lors de l'interaction.

> [!NOTE]
> Il reste possible d’ajouter plus d’actions à remonter, en utilisant les attributs utilitaires `data-fr-analytics-{action}` sur un élément HTML d’un composant (voir : [Actions d’interaction hors composant](../custom-actions/index.md)).