Button

A text, icon, or text and icon button that users can click. For an example in Google Chat apps, see Add a button.

To make an image a clickable button, specify an Image (not an ImageComponent) and set an onClick action.

Available for Google Chat apps and Google Workspace add-ons.

JSON representation
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string,
  "type": enum (Type)
}
Fields
text

string

The text displayed inside the button.

icon

object (Icon)

An icon displayed inside the button. If both icon and text are set, then the icon appears before the text.

color

object (Color)

Optional. The color of the button. If set, the button type is set to FILLED and the color of text and icon fields are set to a contrasting color for readability. For example, if the button color is set to blue, any text or icons in the button are set to white.

To set the button color, specify a value for the red, green, and blue fields. The value must be a float number between 0 and 1 based on the RGB color value, where 0 (0/255) represents the absence of color and 1 (255/255) represents the maximum intensity of the color.

For example, the following sets the color to red at its maximum intensity:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

The alpha field is unavailable for button color. If specified, this field is ignored.

onClick

object (OnClick)

Required. The action to perform when a user clicks the button, such as opening a hyperlink or running a custom function.

disabled

boolean

If true, the button is displayed in an inactive state and doesn't respond to user actions.

altText

string

The alternative text that's used for accessibility.

Set descriptive text that lets users know what the button does. For example, if a button opens a hyperlink, you might write: "Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/workspace/chat".

type

enum (Type)

Optional. The type of a button. If unset, button type defaults to OUTLINED. If the color field is set, the button type is forced to FILLED and any value set for this field is ignored.

Type

Optional. The type of a button. If color field is set, the type is forced to FILLED.

Available for Google Chat apps and unavailable for Google Workspace add-ons.

Enums
TYPE_UNSPECIFIED Don't use. Unspecified.
OUTLINED Outlined buttons are medium-emphasis buttons. They usually contain actions that are important, but aren’t the primary action in a Chat app or an add-on.
FILLED A filled button has a container with a solid color. It has the most visual impact and is recommended for the important and primary action in a Chat app or an add-on.
FILLED_TONAL A filled tonal button is an alternative middle ground between filled and outlined buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline button would give.
BORDERLESS A button does not have an invisible container in its default state. It is often used for the lowest priority actions, especially when presenting multiple options.