---
sourceDocument: Yokohama Mobile Configuração e navegação
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Yokohama Mobile Configuração e navegação

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Platform


---

# Suporte de variável de cor para botões de exibição de cartão

# Suporte de variável de cor para botões de exibição de cartão {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Saiba como usar variáveis de cor para alterar temas nos botões de exibição do cartão para celular.

|-|-|
| Use variáveis de cor em Atributos do elemento do modelo de cartão para controlar os valores de cor para botões de ícone em seus cartões para celular. As seguintes variáveis de cor estão disponíveis para uso: * Variable de cor de fundo * BorderColorVariable * TextColorVariable {#color-var-cardview-button__ul_rhh_pg2_zvb} Para obter mais informações sobre esses atributos, consulte [Atributos de elemento do modelo de cartão](https://servicenow-prod.fluidtopics.net/vMw4qO5WQoewSXC9ip5ndA "Use esta referência para determinar quais atributos usar para os elementos do modelo de cartão."). |   |
[ ]

{#color-var-cardview-button__table_w1s_df2_zvb}

## Guia de estilo de botão {#color-var-cardview-button__section_s2p_lqn_cxb}

{#color-var-cardview-button__table_rwx_4ny_mxb__entry__3}

| Cor | Exemplo | Variáveis |
|-|-|-|
| Primário | ![Exemplo de botão primário]() | Plano de fundo :   Variável móvel: `Primária ` Variável da web: `now-color--primário-1 ` Texto :   Variável móvel: `Texto acionável ` Variável da web: `now-color_text--primário-acionável ` |
| Secundário(a) | ![Exemplo de botão secundário]() | Plano de fundo :   Variável móvel: `Plano de fundo primário ` Variável da web: `now-color_background--primário ` Texto :   Variável móvel: `Primária ` Variável da web: `now-color--primário-1 ` Borda (2 px) :   Variável móvel: `Primária ` Variável da web: `now-color--primário-1 ` |
| Positivo | ![Exemplo de botão positivo]() | Plano de fundo :   Variável móvel: `Positivo ` Variável da web: `now-color_alert--positive-3 ` Texto :   Variável móvel: `Texto acionável ` Variável da web: `now-color_text--primário-acionável ` |
| Destrutivo | ![Exemplo de botão destrutivo]() | Plano de fundo :   Variável móvel: `Destrutivo ` Variável da web: `now-color_alert--critical-3 ` Texto :   Variável móvel: `Texto acionável ` Variável da web: `now-color_text--primário-acionável ` |
| Simples | ![Exemplo de botão simples]() | Plano de fundo :   Variável móvel: `Primária `/ `Positivo `/ `Destrutivo ` Variável da web: `now-color--primário-1 `/ `now-color_alert--positive-3 `/ `now-color_alert--critical-3` Texto :   Variável móvel: `Texto acionável ` Variável da web: `now-color_text--primário-acionável ` Nota: Este botão pode ser configurado com cor primária, positiva ou destrutiva. |
| Desativado | ![Exemplo de botão desabilitado]() | Use este estilo quando a ação estiver indisponível enquanto estiver off-line. Pode ser usado com todos os estilos: Primário, secundário, texto/ícone. |
[ ]

{#color-var-cardview-button__table_rwx_4ny_mxb}