Divider

The Divider widget displays a horizontal line spanning the width of a card between stacked widgets. The line is a visual divider that helps users distinguish between one widget and another, making cards easier to scan and understand.

Example: dividers between widgets

The following image displays a card consisting of Divider widgets between other types of widgets.

A card message in Google Chat depicting a Text Paragraph widget.
Figure 1: A card message in Google Chat depicting several widgets separated by divider widgets.

Here's the card's JSON:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "textParagraph": {
                  "text": "<b>A card with several types of widgets separated by divider widgets.</b>"
                }
              },
              {
                "textParagraph": {
                  "text": "Set a date and time:"
                }
              },
              {
                "divider": {}
              },
              {
                "dateTimePicker": {
                  "name": "date_time_picker_date_and_time",
                  "label": "meeting",
                  "type": 'DATE_AND_TIME',
                }
              },
              {
                "textParagraph": {
                  "text": "A datetime picker widget with just date:"
                }
              },
              {
                "divider": {}
              },
              {
                "selectionInput": {
                  "type": "RADIO_BUTTON",
                  "label": "Choose an option",
                  "name": "contactType",
                  "items": [
                    {
                      "text": "Option 1",
                      "value": "Op1",
                      "selected": false
                    },
                    {
                      "text": "Option 2",
                      "value": "Op2",
                      "selected": false
                    },
                    {
                      "text": "Option 3",
                      "value": "Op3",
                      "selected": true
                    }
                  ]
                }
              },
              {
                "textParagraph": {
                  "text": "Click a button:"
                }
              },
              {
                "divider": {}
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Open a hyperlink",
                      "onClick": {
                        "openLink": {
                          "url": "https://developers.google.com/chat",
                        }
                      }
                    },
                    {
                      "text": "Run a custom function",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "BIRD EYE VIEW",
                            }
                          ],
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

JSON representation

Displays a divider between widgets, a horizontal line.

For example, the following JSON creates a divider:

"divider": {
}