---
sourceDocument: Configuration et navigation mobiles Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - fr-FR

ft:publication_title :

    - Configuration et navigation mobiles Yokohama

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - evelopment, Data and Analytics


---

# Prise en charge de variable de couleur pour les boutons d'affichage de carte

# Prise en charge de variable de couleur pour les boutons d'affichage de carte {#ariaid-title1}

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos boutons d'affichage de carte mobile.

|-|-|
| Utilisez des variables de couleur dans les attributs d'élément de modèle de carte pour contrôler les valeurs de couleur des boutons d'icône sur vos cartes mobiles. Les variables de couleur suivantes peuvent être utilisées : * VariableDeCouleurDeFond * BorderColorVariable * TextColorVariable {#color-var-cardview-button__ul_rhh_pg2_zvb} Pour plus d'informations sur ces attributs, reportez-vous à la section [Attributs d'élément de modèle de carte](https://servicenow-prod.fluidtopics.net/r81SS9w7Z~Hplm9b2ryyhw "Utilisez cette référence pour déterminer les attributs à utiliser pour les éléments de votre modèle de carte."). |   |
[ ]

{#color-var-cardview-button__table_w1s_df2_zvb}

## Guide de style du bouton {#color-var-cardview-button__section_s2p_lqn_cxb}

{#color-var-cardview-button__table_rwx_4ny_mxb__entry__3}

| Couleur | Exemple | Variables |
|-|-|-|
| Principale | ![Exemple de bouton primaire]() | Arrière-plan :   Variable mobile : `primaire` Variable web : `now-color--primary-1` Texte :   Variable mobile : `texte actionnable` Variable Web : `now-color_text--primary-actionable` |
| Secondaire | ![Exemple de bouton secondaire]() | Arrière-plan :   Variable mobile : `arrière-plan primaire` Variable Web : `now-color_background--primary` Texte :   Variable mobile : `primaire` Variable web : `now-color--primary-1` Bordure (2px) :   Variable mobile : `primaire` Variable web : `now-color--primary-1` |
| Positif | ![Exemple de bouton positif]() | Arrière-plan :   Variable mobile : `positif` Variable Web : `now-color_alert--positive-3` Texte :   Variable mobile : `texte actionnable` Variable Web : `now-color_text--primary-actionable` |
| Destructif | ![Exemple de bouton destructeur]() | Arrière-plan :   Variable mobile : `destructrice` Variable Web : `now-color_alert--critical-3` Texte :   Variable mobile : `texte actionnable` Variable Web : `now-color_text--primary-actionable` |
| Nu | ![Exemple de bouton nu]() | Arrière-plan :   Variable mobile : `primaire`/`positive`/`destructrice` Variable web : `now-color--primary-1`/ `now-color_alert--positive-3`/ `now-color_alert--critical-3` Texte :   Variable mobile : `texte actionnable` Variable Web : `now-color_text--primary-actionable` Remarque : Ce bouton peut être configuré avec une couleur primaire, positive ou destructrice. |
| Désactivé | ![Exemple de bouton désactivé]() | Utilisez ce style lorsque l'action n'est pas disponible en mode hors connexion. Peut être utilisé avec tous les styles : primaire, secondaire, texte/icône. |
[ ]

{#color-var-cardview-button__table_rwx_4ny_mxb}