Color variable support for card view buttons

  • Release version: Zurich
  • Updated July 31, 2025
  • 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

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

    		 Color variable used in a card view template element

    Button style guide

    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.