Container

type: 17 Messages

The Container is a box that groups other components, gives them a background and, optionally, a colored bar on the left. It’s the modern replacement for embeds.

Preview

My BotAPPToday at 12:00 PM

✅ Order confirmed

Your order #1042 is on its way.

---

Item: Discord mug

Estimated arrival: 2-3 days

View orderCancel

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "accent_color": 5763719,
      "components": [
        {
          "type": 10,
          "content": "## ✅ Order confirmed\nYour order **#1042** is on its way."
        },
        {
          "type": 14,
          "divider": true,
          "spacing": 1
        },
        {
          "type": 10,
          "content": "**Item:** Discord mug\n**Estimated arrival:** 2-3 days"
        },
        {
          "type": 1,
          "components": [
            {
              "type": 2,
              "style": 2,
              "label": "View order",
              "custom_id": "view_order"
            },
            {
              "type": 2,
              "style": 4,
              "label": "Cancel",
              "custom_id": "cancel_order"
            }
          ]
        }
      ]
    }
  ]
}

Fields

Field	Type	Description
type	integer	required Always 17.
id	integer	optional Unique identifier in the message.
components	array	required The container’s children (see below).
accent_color	integer or null	optional RGB color of the bar, from 0x000000 to 0xFFFFFF.
spoiler	boolean	optional Hides all the content as a spoiler. Defaults to false.

What can go inside?

Action Row, Text Display, Section, Media Gallery, Separator and File.

Caution

A Container can’t go inside another Container.

How do I turn a color into a number?

accent_color is an integer, not a string with #. Convert the hex color to decimal:

Color	Hex	accent_color value
Blurple	#5865F2	5793266
Green	#57F287	5763719
Yellow	#FEE75C	16705372
Red	#ED4245	15548997
Fuchsia	#EB459E	15418782

In most languages you can write 0x5865F2 directly, which is the same number.

Code

HTTP

Use the JSON above as the body of POST /channels/{channel.id}/messages.

JavaScript

import { ContainerBuilder, ButtonBuilder, ButtonStyle, MessageFlags } from 'discord.js';

const container = new ContainerBuilder()
  .setAccentColor(0x57f287)
  .addTextDisplayComponents((text) =>
    text.setContent('## ✅ Order confirmed\nYour order **#1042** is on its way.'),
  )
  .addSeparatorComponents((separator) => separator)
  .addTextDisplayComponents((text) =>
    text.setContent('**Item:** Discord mug\n**Estimated arrival:** 2-3 days'),
  )
  .addActionRowComponents((row) =>
    row.setComponents(
      new ButtonBuilder().setCustomId('view_order').setLabel('View order').setStyle(ButtonStyle.Secondary),
      new ButtonBuilder().setCustomId('cancel_order').setLabel('Cancel').setStyle(ButtonStyle.Danger),
    ),
  );

await channel.send({ flags: MessageFlags.IsComponentsV2, components: [container] });

Python

view = discord.ui.LayoutView()
view.add_item(
    discord.ui.Container(
        discord.ui.TextDisplay("## ✅ Order confirmed\nYour order **#1042** is on its way."),
        discord.ui.Separator(),
        discord.ui.TextDisplay("**Item:** Discord mug\n**Estimated arrival:** 2-3 days"),
        discord.ui.ActionRow(
            discord.ui.Button(label="View order", style=discord.ButtonStyle.secondary, custom_id="view_order"),
            discord.ui.Button(label="Cancel", style=discord.ButtonStyle.danger, custom_id="cancel_order"),
        ),
        accent_colour=0x57F287,
    )
)
await channel.send(view=view)

Go

color := 0x57F287
container := discordgo.Container{
  AccentColor: &color,
  Components: []discordgo.MessageComponent{
    discordgo.TextDisplay{Content: "## ✅ Order confirmed\nYour order **#1042** is on its way."},
    discordgo.Separator{},
    discordgo.TextDisplay{Content: "**Item:** Discord mug\n**Estimated arrival:** 2-3 days"},
    discordgo.ActionsRow{Components: []discordgo.MessageComponent{
      discordgo.Button{Label: "View order", Style: discordgo.SecondaryButton, CustomID: "view_order"},
      discordgo.Button{Label: "Cancel", Style: discordgo.DangerButton, CustomID: "cancel_order"},
    }},
  },
}

s.ChannelMessageSendComplex(channelID, &discordgo.MessageSend{
  Flags:      discordgo.MessageFlagsIsComponentsV2,
  Components: []discordgo.MessageComponent{container},
})

More examples

No color, as a spoiler

Preview

My BotAPPToday at 12:00 PM

The butler did it.

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "spoiler": true,
      "components": [
        {
          "type": 10,
          "content": "The butler did it."
        }
      ]
    }
  ]
}

Several containers in one message

You can stack several containers, each with its own color:

Preview

My BotAPPToday at 12:00 PM

🟢 API — Operational

🟡 Database — Degraded

🔴 Payments — Down

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "accent_color": 5763719,
      "components": [
        {
          "type": 10,
          "content": "🟢 **API** — Operational"
        }
      ]
    },
    {
      "type": 17,
      "accent_color": 16705372,
      "components": [
        {
          "type": 10,
          "content": "🟡 **Database** — Degraded"
        }
      ]
    },
    {
      "type": 17,
      "accent_color": 15548997,
      "components": [
        {
          "type": 10,
          "content": "🔴 **Payments** — Down"
        }
      ]
    }
  ]
}

Tips

• Use it to group related information; you don’t need to put the whole message in a Container.
• Use colors with a consistent meaning (green = success, red = error).
• Remember that the Container’s children count toward the 40-component limit.