Container

type: 17 Mensajes

El Container es una caja que agrupa otros componentes y les pone un fondo y, si quieres, una barra de color a la izquierda. Es el sustituto moderno del embed.

Vista previa

Mi BotAPPHoy a las 12:00

✅ Pedido confirmado

Tu pedido #1042 está en camino.

---

Producto: Taza Discord

Llegada estimada: 2-3 días

Ver pedidoCancelar

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "accent_color": 5763719,
      "components": [
        {
          "type": 10,
          "content": "## ✅ Pedido confirmado\nTu pedido **#1042** está en camino."
        },
        {
          "type": 14,
          "divider": true,
          "spacing": 1
        },
        {
          "type": 10,
          "content": "**Producto:** Taza Discord\n**Llegada estimada:** 2-3 días"
        },
        {
          "type": 1,
          "components": [
            {
              "type": 2,
              "style": 2,
              "label": "Ver pedido",
              "custom_id": "ver_pedido"
            },
            {
              "type": 2,
              "style": 4,
              "label": "Cancelar",
              "custom_id": "cancelar_pedido"
            }
          ]
        }
      ]
    }
  ]
}

Campos

Campo	Tipo	Descripción
type	entero	obligatorio Siempre 17.
id	entero	opcional Identificador único en el mensaje.
components	array	obligatorio Hijos del contenedor (ver abajo).
accent_color	entero o null	opcional Color de la barra en RGB, de 0x000000 a 0xFFFFFF.
spoiler	booleano	opcional Oculta todo el contenido como spoiler. Por defecto false.

¿Qué puede ir dentro?

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

Precaución

Un Container no puede ir dentro de otro Container.

¿Cómo convierto un color a número?

accent_color es un número entero, no un texto con #. Convierte el color hexadecimal a decimal:

Color	Hex	Valor para accent_color
Blurple	#5865F2	5793266
Verde	#57F287	5763719
Amarillo	#FEE75C	16705372
Rojo	#ED4245	15548997
Fucsia	#EB459E	15418782

En la mayoría de lenguajes puedes escribir directamente 0x5865F2, que es el mismo número.

Código

HTTP

Usa el JSON de arriba como cuerpo de POST /channels/{channel.id}/messages.

JavaScript

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

const container = new ContainerBuilder()
  .setAccentColor(0x57f287)
  .addTextDisplayComponents((text) =>
    text.setContent('## ✅ Pedido confirmado\nTu pedido **#1042** está en camino.'),
  )
  .addSeparatorComponents((separator) => separator)
  .addTextDisplayComponents((text) =>
    text.setContent('**Producto:** Taza Discord\n**Llegada estimada:** 2-3 días'),
  )
  .addActionRowComponents((row) =>
    row.setComponents(
      new ButtonBuilder().setCustomId('ver_pedido').setLabel('Ver pedido').setStyle(ButtonStyle.Secondary),
      new ButtonBuilder().setCustomId('cancelar_pedido').setLabel('Cancelar').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("## ✅ Pedido confirmado\nTu pedido **#1042** está en camino."),
        discord.ui.Separator(),
        discord.ui.TextDisplay("**Producto:** Taza Discord\n**Llegada estimada:** 2-3 días"),
        discord.ui.ActionRow(
            discord.ui.Button(label="Ver pedido", style=discord.ButtonStyle.secondary, custom_id="ver_pedido"),
            discord.ui.Button(label="Cancelar", style=discord.ButtonStyle.danger, custom_id="cancelar_pedido"),
        ),
        accent_colour=0x57F287,
    )
)
await channel.send(view=view)

Go

color := 0x57F287
container := discordgo.Container{
  AccentColor: &color,
  Components: []discordgo.MessageComponent{
    discordgo.TextDisplay{Content: "## ✅ Pedido confirmado\nTu pedido **#1042** está en camino."},
    discordgo.Separator{},
    discordgo.TextDisplay{Content: "**Producto:** Taza Discord\n**Llegada estimada:** 2-3 días"},
    discordgo.ActionsRow{Components: []discordgo.MessageComponent{
      discordgo.Button{Label: "Ver pedido", Style: discordgo.SecondaryButton, CustomID: "ver_pedido"},
      discordgo.Button{Label: "Cancelar", Style: discordgo.DangerButton, CustomID: "cancelar_pedido"},
    }},
  },
}

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

Más ejemplos

Sin color y como spoiler

Vista previa

Mi BotAPPHoy a las 12:00

El asesino era el mayordomo.

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "spoiler": true,
      "components": [
        {
          "type": 10,
          "content": "El asesino era el mayordomo."
        }
      ]
    }
  ]
}

Varios contenedores en un mensaje

Puedes poner varios contenedores seguidos, cada uno con su color:

Vista previa

Mi BotAPPHoy a las 12:00

🟢 API — Operativa

🟡 Base de datos — Lenta

🔴 Pagos — Caído

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "accent_color": 5763719,
      "components": [
        {
          "type": 10,
          "content": "🟢 **API** — Operativa"
        }
      ]
    },
    {
      "type": 17,
      "accent_color": 16705372,
      "components": [
        {
          "type": 10,
          "content": "🟡 **Base de datos** — Lenta"
        }
      ]
    },
    {
      "type": 17,
      "accent_color": 15548997,
      "components": [
        {
          "type": 10,
          "content": "🔴 **Pagos** — Caído"
        }
      ]
    }
  ]
}

Consejos

• Úsalo para agrupar información relacionada; no hace falta meter todo el mensaje en un Container.
• Usa los colores con un significado coherente (verde = éxito, rojo = error).
• Recuerda que los hijos del Container cuentan para el límite de 40 componentes.