---
sourceDocument: Australia Mobile Configuration and Navigation
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/mobile

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Mobile Configuration and Navigation

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# Color variable support for card view buttons

# Color variable support for card view buttons {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Learn how to use color variables to change theming in your mobile card view buttons.

|-|-|
| Use color variables in Card template element attributes to control color values for icon buttons on your mobile cards. The following color variables are available to use: * BackgroundColorVariable * BorderColorVariable * TextColorVariable {#color-var-cardview-button__ul_rhh_pg2_zvb} For more information on these attributes, see [Card template element attributes](https://servicenow-prod.fluidtopics.net/8lRWFpR2NYwO1ifz9tkEdg "Use this reference to determine which attributes to use for your card template elements."). |   |
[ ]

{#color-var-cardview-button__table_w1s_df2_zvb}

## Button style guide {#color-var-cardview-button__section_s2p_lqn_cxb}

{#color-var-cardview-button__table_rwx_4ny_mxb__entry__3}

| Color | Example | Variables |
|-|-|-|
| Primary | ![Primary button example]() | Background :   Mobile variable: `Primary` Web variable: `now-color--primary-1` Text :   Mobile variable: `Text Actionable` Web variable: `now-color_text--primary-actionable` |
| Secondary | ![Secondary button example]() | Background :   Mobile variable: `Background Primary` Web variable: `now-color_background--primary` Text :   Mobile variable: `Primary` Web variable: `now-color--primary-1` Border (2px) :   Mobile variable: `Primary` Web variable: `now-color--primary-1` |
| Positive | ![Positive button example]() | Background :   Mobile variable: `Positive` Web variable: `now-color_alert--positive-3` Text :   Mobile variable: `Text Actionable` Web variable: `now-color_text--primary-actionable` |
| Destructive | ![Destructive button example]() | Background :   Mobile variable: `Destructive` Web variable: `now-color_alert--critical-3` Text :   Mobile variable: `Text Actionable` Web variable: `now-color_text--primary-actionable` |
| Bare | ![Bare button example]() | Background :   Mobile variable: `Primary`/`Positive`/`Destructive` Web variable: `now-color--primary-1`/ `now-color_alert--positive-3`/ `now-color_alert--critical-3` Text :   Mobile variable: `Text Actionable` Web variable: `now-color_text--primary-actionable` Note: This button can be configured with primary, positive, or destructive color. |
| Disabled | ![Disabled button example]() | Use this style when the action is unavailable while offline. Can be used with all styles- primary, secondary, text/icon. |
[ ]

{#color-var-cardview-button__table_rwx_4ny_mxb}