Suporte a variáveis de cor para botões de exibição de cartão

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 1 min. de leitura
  • Saiba como usar variáveis de cor para alterar temas nos botões de exibição do cartão do celular.

    Use variáveis de cor em Atributos do elemento do modelo de cartão para controlar valores de cor para botões de ícone em seus cartões móveis.

    As seguintes variáveis de cor estão disponíveis para uso:
    • BackgroundColorVariable
    • VariávelCorBor
    • TextColorVariable

    Para obter mais informações sobre esses atributos, consulte Atributos de elemento do modelo de cartão.

    Variável de cor usada em um elemento de modelo de exibição de cartão

    Guia de estilo de botão

    Cor Exemplo Variáveis
    Primário Exemplo de botão primário
    Plano de fundo

    Variável móvel: Primário

    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ário

    Variável da Web: now-color--primário-1

    Borda (2px)

    Variável móvel: Primário

    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ário / 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.
    Desabilitado Exemplo de botão desabilitado

    Use este estilo quando a ação não estiver disponível enquanto estiver off-line.

    Pode ser usado com todos os estilos: Primário, secundário, texto/ícone.