- [JSON representation](https://developers.google.com/workspace/chat/api/reference/rest/v1/Button#SCHEMA_REPRESENTATION)
- [Type](https://developers.google.com/workspace/chat/api/reference/rest/v1/Button#Type)

A text, icon, or text and icon button that users can click. For an example in Google Chat apps, see [Add a button](https://developers.google.com/workspace/chat/design-interactive-card-dialog#add_a_button).

To make an image a clickable button, specify an `https://developers.google.com/workspace/chat/api/reference/rest/v1/Card#Image` (not an `https://developers.google.com/workspace/chat/api/reference/rest/v1/Card#ImageComponent`) and set an `onClick` action.

![](https://www.gstatic.com/images/branding/productlogos/chat_2023q4/v1/192px.svg) ![](https://www.gstatic.com/images/branding/productlogos/gsuite_addons/v6/192px.svg) Available for Google Chat apps and Google Workspace add-ons.

| JSON representation |
|---|
| ``` { "text": string, "icon": { object (`https://developers.google.com/workspace/chat/api/reference/rest/v1/Icon`) }, "color": { object (`https://developers.google.com/workspace/chat/api/reference/rest/v1/Color`) }, "onClick": { object (`https://developers.google.com/workspace/chat/api/reference/rest/v1/OnClick`) }, "disabled": boolean, "altText": string, "type": enum (`https://developers.google.com/workspace/chat/api/reference/rest/v1/Button#Type`) } ``` |

| Fields ||
|---|---|
| `text` | `string` The text displayed inside the button. |
| `icon` | ``object (`https://developers.google.com/workspace/chat/api/reference/rest/v1/Icon`)`` An icon displayed inside the button. If both `icon` and `text` are set, then the icon appears before the text. |
| `color` | ``object (`https://developers.google.com/workspace/chat/api/reference/rest/v1/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 (`https://developers.google.com/workspace/chat/api/reference/rest/v1/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"](https://developers.google.com/workspace/chat). |
| `type` | ``enum (`https://developers.google.com/workspace/chat/api/reference/rest/v1/Button#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](https://m3.material.io/components/all-buttons#9134ac95-678e-49ae-a50a-e71948011b05) of a button. If `color` field is set, the `type` is forced to `FILLED`.

![](https://www.gstatic.com/images/branding/productlogos/chat_2023q4/v1/192px.svg) 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. |