Symphony Messaging Dev Docs
Developer CertificationREST API
  • Start Your Developer Journey
  • Bots
    • Building Bots
    • Planning Your Bot
      • Conversational Bot
      • Interactive Bot
      • Headless Bot
    • Getting Started
      • Getting Started with BDK
      • Creating a Service Account
      • Configuration
      • Truststores
    • Overview of REST API
      • REST API Architecture
      • Overview of Pod API
      • Overview of Key Manager API
      • Overview of Agent API
      • Bot Permissions
      • REST API Reference
    • Authentication
      • RSA Authentication Workflow
      • Certificate Authentication Workflow
    • Datafeed
      • Real-Time Events
      • Overview of Streams
    • Messages
      • MessageML
        • MessageML Basics
          • Content Grouping
          • Text formatting and semantics
          • Tables
          • Images
          • Tags and mentions
            • Enhanced tags notice
          • Style Attributes
          • Special Characters
          • Emojis
        • Elements Interactive Forms
          • Buttons
            • Icon set for Buttons
          • Text Field
          • Masked Text Field
          • Text Area
          • Checkbox
          • Radio Button
          • Dropdown Menu
          • Person Selector
          • Room Selector
          • Date Picker
          • Time Picker
          • Timezone Picker
          • Table Select
          • Regular Expressions - Regex
        • Extensibility UI Actions
          • OpenChat
          • Dialog
        • Entities
          • Standard Entities
          • Custom Entities
      • PresentationML
    • Bots Best Practices
    • Open Source Code Samples
  • Extension Apps
    • Building Extension Apps
    • Planning Your App
    • Getting Started
      • Getting Started with ADK
      • Application Manifest Bundle
      • Add an Extension App to a Symphony Pod
    • Overview of Extension API
      • Initialization
      • Register and Connect
      • Extension API Services
        • Service Interface
        • Register and Subscribe
        • Modules Service
        • Entity Service
          • Entity Advanced Templating
          • Message Format - ExtensionML
        • Applications-Nav Service
        • Share Service
        • Commerce Service
        • Dialogs Service
        • UI Service
          • Receiving Conversation and User Information
          • Filter Function
    • App Authentication
      • Circle of Trust Authentication
      • OBO Authentication
  • Developer Tools
    • Symphony Messaging Generator
    • Bot Developer Kit for Java
      • Build a Conversational Bot
      • Build an Interactive Bot
      • Build a Headless Bot
      • Integrate a Bot with an Identity Provider
    • Bot Developer Kit for Python
    • App Developer Kit
      • Build a Basic Extension App
      • Build an Extension App with App Views
        • Add Buttons and Handlers to an Extension App
        • Add BDK to an Extension App for Circle of Trust
      • Build an Extension App with Message Renderers
    • Postman
    • UI Style Guide
      • Colors
      • Form Elements
      • Buttons
  • Embedded Modules
    • Symphony Messaging URI
      • Symphony Messaging URI for Mobile (deprecated)
    • Desktop interoperability
      • FDC3 intents
        • Message format
      • Configuration guide
        • Configure Interop.io
        • Configure Here Core
        • Configure Finsemble
        • Configure with Embedded Mode
        • Troubleshooting
      • Change log
    • Embedded Mode
      • Get started
      • Configuration parameters
      • Open a chat
      • Send a message
      • Create a room
      • Pin a message
      • Notifications
      • Support for extension applications
      • Open an app
      • Embedded Mode with Sponsored Access
      • Pricing tiers
      • Logout
    • Universal Webhook
      • User guide
        • Example with Splunk
      • Installation guide
  • Symphony REST API
    • Messaging REST API
    • Federation
    • Sponsored Access API
    • Enhanced Directory API
  • Developer Certification
    • Developer Certification
  • Mobile Frameworks
    • Blackberry
    • MobileIron
  • Admin Guides
    • Change Logs
      • API Agent
        • Agent - 25.5
        • Agent - 25.3 (LTS)
        • Agent - 24.12 (LTS)
        • Agent - 24.9 (LTS)
        • Agent - 24.6 (LTS)
        • Archives
          • Agent - 24.11
          • Agent - 24.10
          • Agent - 23.9 (LTS)
          • Agent - 24.8
          • Agent - 24.3 (LTS)
          • Agent - 24.2
          • Agent - 24.1
          • Agent - 23.12 (LTS)
          • Agent - 23.11
          • Agent - 23.10
          • Agent - 23.7
          • Agent - 23.6 (LTS)
          • Agent - 23.4
          • Agent - 23.3 (LTS)
          • Agent - 23.1
          • Agent - 22.12 (LTS)
          • Agent - 22.11
          • Agent - 22.10
          • Agent - 22.9 (LTS)
          • Agent - 22.8
          • Agent - 22.7
          • Agent - 22.6 (LTS)
          • Agent - 20.14
          • Agent - 20.13
          • Agent - 20.12
          • Agent - 20.10
          • Agent - 20.9 (2.62)
          • Agent - 20.7 (2.61)
          • Agent - 20.6 (2.60)
          • Agent - 20.5 (2.59)
          • Agent - 20.4 (2.58)
      • SBE (Pod API)
        • SBE - 24.1
        • SBE - 20.16
        • SBE - 20.15
        • Archives
          • SBE - 20.14
          • SBE - 20.13
          • SBE - 20.12
          • SBE - 20.10
          • SBE - 20.9 (1.62)
          • SBE - 20.7 (1.61)
          • SBE - 20.6 (1.60)
          • SBE - 20.5 (1.59)
          • SBE - 20.4 (1.58)
      • Client 2.0 APIs
        • Client 2.0 - 25.05
        • Client 2.0 - 25.03
        • Client 2.0 - 24.12
        • Client 2.0 - 24.05
        • Client 2.0 - 23.02
        • Client 2.0 - 22.11
        • Archives
          • Client 2.0 - 20.4
          • Client 2.0 - 20.5
          • Client 2.0 - 20.6
          • Client 2.0 - 20.7
          • Client 2.0 - 20.9
          • Client 2.0 - 20.10
          • Client 2.0 - 20.12
          • Client 2.0 - 22.8
          • Client 2.0 - 22.10
      • Universal Webhook
        • Univ Webhook - 2.6
        • Univ Webhook - 2.4
        • Univ Webhook - 2.2
        • Univ Webhook - 2.1
        • Univ Webhook - 2.0
    • API Change Management
    • Global Throttling
    • Agent Guide
      • Network Topology
      • Agent Download
      • Agent Installation
      • Agent Configuration Fields
      • Agent Server High Availability
      • Agent Performance Tuning
Powered by GitBook
On this page
  • General Recommendations
  • Primary
  • Secondary
  • Link
  • Disabled
  • Cancel Action
  • Compact
  • Icon Buttons
  • Icon Action

Was this helpful?

Export as PDF
  1. Developer Tools
  2. UI Style Guide

Buttons

Last updated 2 months ago

Was this helpful?

Note: For native support of Buttons, refer to . The following is built for extension applications looking to implement their own button or input logic.

Buttons change color depending on the user’s theming preferences. They are generally the same color as the theme accent color.

Buttons must include the following class to inherit the proper shape:

  • tempo-btn

You can modify the style of a button by applying any of these additional classes:

  • tempo-btn--primary

  • tempo-btn--secondary

  • tempo-btn--link

  • tempo-btn--disabled

General Recommendations

  • Have only one primary button per screen or view that displays to the right of all other buttons and links.

  • Have only one cancel action button per screen or view that displays to the left of all other buttons and links. Cancel action buttons must follow these design guidelines:

    • Are link style, text only, and gray in color.

    • Have a label of Cancel, Remove, Ignore, or similar text.

    • Are the last button on the left if buttons are horizontally aligned.

  • Have up to two secondary buttons to the left of the primary button.

  • Third-level buttons (or tertiary buttons) are generally icons or plain text links. Do not place third-level buttons inline with standard size buttons.

  • Do not use compact buttons with standard size buttons. We recommend using compact buttons only when space prohibits the using standard size buttons.

Primary

Use the Primary button style when there is a clear primary action on a page or for a message. Avoid displaying multiple primary buttons within the same context. We recommend that a primary button always displays to the right of any other buttons. The image below shows a Primary button style adjacent to a text link.

<div class="tempo-btn tempo-btn--primary">Button</div>

Secondary

Use the Secondary button style when there are multiple actions of the same importance or some actions with less importance than a single primary action. You can align multiple secondary buttons vertically or horizontally on the interface. If you align multiple buttons in a horizontal row, we recommend a maximum of three buttons: one primary and two secondary.

<div class="tempo-btn tempo-btn--secondary">Button</div>

Link

Link buttons are similar to secondary action buttons, while being more discreet. Use links for situations when there are many secondary actions, particularly when these actions are stacked, included in tables, or part of other interface elements within messages.

<div class="tempo-btn tempo-btn--link">Button</div>

Disabled

Use the Disabled button style to show that an action is currently unavailable. You can use this style with the Primary, Secondary, and Link styles.

<div class="tempo-btn tempo-btn--<style> tempo-btn--disabled">Button</div>

Cancel Action

Use this style for situations where a user can choose one of two actions: cancel and complete.

Compact

You can apply the Compact style to the Primary, Secondary, and Link styles. This style reduces the button’s size for optimal display in compact environments.

Note: Do not use compact buttons with standard size buttons. We recommend using compact buttons only when space prohibits the use of standard size buttons.

Icon Buttons

Use Icon buttons when there is limited space and the action can be represented by an icon, such as a checkmark. You can use the Icon style for Primary, Secondary, Disabled, and Compact buttons.

Icon Action

Use the Icon Action style for situations where you don’t need a button; for example, a 5-star rating scale. Icon Actions must meet the following requirements:

  • Format: .svg

  • Size: 18 x 18 pixels

  • Color: Black and white or color

  • State: Normal is 54% opacity; Hover/Active is 87% opacity

Symphony Messaging Elements