Color theme considerations › Configure theming › Next Experience theming › Configuring the Mobile Platform › Mobile Platform

Release: Australia · Updated: 2026-03-12 · Official documentation · View source

Color variable support for card view buttons

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

For more information on these attributes, see Card template element attributes.

Image omitted: color-var-example-6.png
Color variable used in a card view template element

Button style guide

Color	Example	Variables
Primary	Image omitted: button-primary.png 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	Image omitted: button-secondary.png 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	Image omitted: button-positive.png 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	Image omitted: button-destructive.png 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	Image omitted: button-bare.png 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	Image omitted: button-disabled.png Disabled button example	Use this style when the action is unavailable while offline. Can be used with all styles- primary, secondary, text/icon.