Skip to content

Commit 17d4a35

Browse files
Added Components v2
1 parent f77a1ae commit 17d4a35

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1632
-778
lines changed

docs/change-log/2017-07-24-new-feature-audit-logs.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ title: "New Feature: Audit Logs"
33
date: "2017-07-24"
44
---
55

6-
Audit logs are here! Well, they've been here all along, but now we've got [documentation](/docs/resources/audit-log#) about them. Check it out, but remember: with great power comes great responsibility.
6+
Audit logs are here! Well, they've been here all along, but now we've got [documentation](/docs/resources/audit-log) about them. Check it out, but remember: with great power comes great responsibility.

docs/change-log/2018-01-23-deprecation-accept-invite-endpoint.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ title: "Deprecation: Accept Invite Endpoint"
33
date: "2018-01-23"
44
---
55

6-
The [Accept Invite](/docs/resources/invite#) endpoint is deprecated starting today, and will be discontinued on March 23, 2018. The [Add Guild Member](/docs/resources/guild#add-guild-member) endpoint should be used in its place.
6+
The [Accept Invite](/docs/resources/invite) endpoint is deprecated starting today, and will be discontinued on March 23, 2018. The [Add Guild Member](/docs/resources/guild#add-guild-member) endpoint should be used in its place.

docs/change-log/2019-08-12-more-precise-rate-limits.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ title: "More Precise Rate Limits"
33
date: "2019-08-12"
44
---
55

6-
You can now get more precise rate limit reset times, via a new request header. Check out the [rate limits](/docs/topics/rate-limits#) documentation for more information.
6+
You can now get more precise rate limit reset times, via a new request header. Check out the [rate limits](/docs/topics/rate-limits) documentation for more information.

docs/change-log/2020-12-15-slash-commands-and-interactions.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: "Slash Commands and Interactions"
33
date: "2020-12-15"
44
---
55

6-
Slash Commands are here! There's a *lot* to cover, so go check out specific documentation under [Slash Commands](/docs/interactions/application-commands#).
6+
Slash Commands are here! There's a *lot* to cover, so go check out specific documentation under [Slash Commands](/docs/interactions/application-commands).
77

88
Slash Commands include some new features for webhooks as well:
99

docs/change-log/2021-05-26-buttons-and-message-components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ date: "2021-05-26"
55

66
Message components are now available with our first two components: a layout-based `ActionRow` and...buttons!
77

8-
You can now include buttons on messages sent by your app, whether they're bot messages or responses to interactions. [Learn more about message components](/docs/interactions/message-components#).
8+
You can now include buttons on messages sent by your app, whether they're bot messages or responses to interactions. [Learn more about message components](/docs/components/overview).
99

1010
The addition of message components means new fields and response types:
1111

docs/change-log/2021-06-30-select-menu-components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ date: "2021-06-30"
55

66
Select Menus are now part of the components API! They're the greatest thing since the invention of buttons yesterday. Select menus allow you to offer users a choice of one or many options in a friendly UI-based way.
77

8-
Select menus can be used like other [message components](/docs/interactions/message-components#). Learn all the specifics in the [documentation](/docs/interactions/message-components#select-menus).
8+
Select menus can be used like other [message components](/docs/components/overview). Learn all the specifics in the [documentation](/docs/components/reference#string-select).

docs/change-log/2022-10-13-new-select-menu-components.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ title: "New Select Menu Components"
33
date: "2022-10-13"
44
---
55

6-
Four new select menu [component types](/docs/interactions/message-components#component-object-component-types) have been added to make it easier to populate selects with common resources in Discord:
6+
Four new select menu [component types](/docs/components/reference#component-object-component-types) have been added to make it easier to populate selects with common resources in Discord:
77

88
* User select (type `5`)
99
* Role select (type `6`)
1010
* Mentionable (user *and* role) select (type `7`)
1111
* Channel select (type `8`)
1212

13-
The new select menu components are defined similarly to the existing string select menu—with the exception of not including the `options` field and, within channel select menus, having the option to include a `channel_types` field. The [select menu interaction](/docs/interactions/message-components#select-menu-object-select-menu-interaction) apps receive also contain a [`resolved` field](/docs/interactions/message-components#select-menu-object-select-menu-resolved-object) for the new components.
13+
The new select menu components are defined similarly to the existing string select menu—with the exception of not including the `options` field and, within channel select menus, having the option to include a `channel_types` field. The [select menu interaction](/docs/components/reference#string-select-string-select-interaction) apps receive also contain a [`resolved` field](/docs/components/reference#string-select-select-menu-resolved-object) for the new components.
1414

15-
More details can be found in the updated [select menu documentation](/docs/interactions/message-components#select-menus).
15+
More details can be found in the updated [select menu documentation](/docs/components/reference#component-object-component-types).

docs/change-log/2023-09-22-default-value-in-auto-populated-select-menus.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ title: "Default Value in Auto-populated Select Menus"
33
date: "2023-09-22"
44
---
55

6-
A new `default_values` field was added for user (`5`), role (`6`), mentionable (`7`), and channel (`8`) [select menu components](/docs/interactions/message-components#select-menus). `default_values` is a list of [default value objects](/docs/interactions/message-components#select-menu-object-select-default-value-structure), which each include an `id` (the snowflake value for the resource), as well as a corresponding `type` (either `"user"`, `"role"`, or `"channel"`).
6+
A new `default_values` field was added for user (`5`), role (`6`), mentionable (`7`), and channel (`8`) [select menu components](/docs/components/reference). `default_values` is a list of [default value objects](/docs/components/reference#user-select-select-default-value-structure), which each include an `id` (the snowflake value for the resource), as well as a corresponding `type` (either `"user"`, `"role"`, or `"channel"`).

docs/change-log/2023-09-26-premium-app-subscriptions-available-in-the-us.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ Starting today, eligible US-based developers can monetize their verified apps wi
1717
* [Delete Test Entitlement](/docs/resources/entitlement#delete-test-entitlement) `DELETE /applications/<application.id>/entitlements/<entitlement.id>`
1818
* [Gateway Events](/docs/events/gateway-events#entitlements) for working with entitlements: `ENTITLEMENT_CREATE`, `ENTITLEMENT_UPDATE`, `ENTITLEMENT_DELETE`
1919
* New [`PREMIUM_REQUIRED (10)` interaction response type](/docs/interactions/receiving-and-responding#interaction-response-object-interaction-callback-type) is available to prompt users to upgrade
20-
* New `entitlements` field, which is an array of [entitlement](/docs/resources/entitlement#) objects, available in interaction data payloads when [receiving and responding to interactions](/docs/interactions/receiving-and-responding#interaction-object-interaction-structure)
20+
* New `entitlements` field, which is an array of [entitlement](/docs/resources/entitlement) objects, available in interaction data payloads when [receiving and responding to interactions](/docs/interactions/receiving-and-responding#interaction-object-interaction-structure)
2121

2222
To learn more about eligibility details and how to enable monetization for your app, check out the [Monetization Overview](/docs/monetization/overview).

docs/change-log/2024-06-17-premium-apps-new-premium-button-style-deep-linking-url-schemes.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ date: "2024-06-17"
55

66
**New Premium Button Style**
77

8-
Introduces a new `premium` [button style](/docs/interactions/message-components#button-object-button-styles) to be used with a `sku_id` which points to an active [SKU](/docs/resources/sku#sku-object). This allows developers to customize their premium experience by returning specific subscription or one-time purchase products.
8+
Introduces a new `premium` [button style](/docs/components/reference#button-button-styles) to be used with a `sku_id` which points to an active [SKU](/docs/resources/sku#sku-object). This allows developers to customize their premium experience by returning specific subscription or one-time purchase products.
99

10-
Learn more about using [button components with interactions](/docs/interactions/message-components#buttons).
10+
Learn more about using [button components with interactions](/docs/components/reference#button).
1111

1212
:::warn
1313
This change deprecates Interaction Response Type 10
1414
:::
1515

16-
The `PREMIUM_REQUIRED (10)` interaction response type is now deprecated in favor of using custom premium buttons. This will continue to function but may be eventually unsupported. It is recommended to migrate your bots to use the more flexible [premium button component](/docs/interactions/message-components#button-object-button-styles).
16+
The `PREMIUM_REQUIRED (10)` interaction response type is now deprecated in favor of using custom premium buttons. This will continue to function but may be eventually unsupported. It is recommended to migrate your bots to use the more flexible [premium button component](/docs/components/reference#button-button-styles).
1717

1818
Learn more about [gating features with premium interactions](/docs/monetization/implementing-app-subscriptions#prompting-users-to-subscribe).
1919

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: "Introducing New Components for Messages!"
3+
date: "2025-04-22"
4+
topics:
5+
- "User Apps"
6+
- "HTTP API"
7+
- "Interactions"
8+
---
9+
10+
We're bringing new components to messages that you can use in your apps. They allow you to have full control over the layout of your messages.
11+
12+
#### Why We Built Components V2
13+
14+
Our previous components system, while functional, had limitations:
15+
16+
- Content, attachments, embeds, and components had to follow fixed vertical positioning rules
17+
- Visual styling options were limited
18+
- It was difficult to make visually cohesive experiences that combined the various functionalities of messages given they were expressed in a non-unified system
19+
20+
Our new component system addresses these challenges with fully composable components that can be arranged and laid out in any order, allowing for a more flexible and visually appealing design.
21+
22+
#### What's New
23+
24+
[Components V2](/docs/components/overview) introduces several new component types that can be used in messages:
25+
26+
#### New Layout Components
27+
28+
- [**Section**](/docs/components/reference#section) - Combine text with an accessory component for contextually linked elements
29+
- [**Container**](/docs/components/reference#container) - Create visually distinct groupings with a customizable accent color
30+
- [**Separator**](/docs/components/reference#separator) - Add visual spacing and dividers between components
31+
32+
#### New Content Components
33+
34+
- [**Text Display**](/docs/components/reference#text-display) - Add rich markdown-formatted text anywhere in your messages
35+
- [**Thumbnail**](/docs/components/reference#thumbnail) - An image used in a [section](/docs/components/reference#section)
36+
- [**Media Gallery**](/docs/components/reference#media-gallery) - Present collections of images and videos in an organized grid
37+
- [**File**](/docs/components/reference#file) - Embed file attachments as part of your message layout
38+
39+
#### Getting Started
40+
41+
To use the new components, you'll need to send the message flag `1 << 15` (`IS_COMPONENTS_V2`) which activates the components system on a per-message basis.
42+
43+
We've created guides to help you implement these new features:
44+
45+
- [Using Message Components](/docs/components/using-message-components) - Learn how to build rich message layouts with components
46+
- [Using Modal Components](/docs/components/using-modal-components) - Create interactive forms and dialogs
47+
48+
#### Compatibility Notes
49+
50+
[Legacy component behavior](/docs/components/reference#legacy-message-component-behavior) will continue to work as before, so your existing integrations won't break. However, when using the Components V2 flag, you'll need to adapt to a few changes:
51+
52+
- The `content` and `embeds` fields will no longer work but you'll be able to use [Text Display](/docs/components/reference#text-display) and [Container](/docs/components/reference#container) as replacements
53+
- Attachments need to be exposed through components to be visible. You can use a [Media Gallery](/docs/components/reference#media-gallery), [Thumbnail](/docs/components/reference#thumbnail), or [File](/docs/components/reference#file) component to display them
54+
- The `poll` and `stickers` fields are disabled
55+
- A max of 10 top-level components and 30 total components in a message
56+
57+
#### Developer Resources
58+
59+
Check out our [Component Reference](/docs/components/reference) for detailed specifications on all available components.
60+
61+
We can't wait to see what you build!

docs/components/overview.mdx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
sidebar_label: Overview
3+
showTOC: false
4+
---
5+
6+
# Components Overview
7+
8+
Components allow you to add interactive elements to modals and the messages your app sends. They're accessible, customizable, and easy to use.
9+
10+
![](images/components/hero.png)
11+
12+
Discord apps support three types of message components: layout components, content components, and interactive components. Each type of component has its own purpose and use cases.
13+
14+
- **Layout Components**: These components are used to organize and structure the content of your message. They help create a visually appealing and user-friendly layout.
15+
- **Content Components**: These components are used to display information and content in your message. They can include text, images, and other media.
16+
- **Interactive Components**: These components allow users to interact with your message. They can include buttons, select menus, and other interactive elements.
17+
18+
All components are customizable and can be organized using layout components to create rich, interactive message experiences.
19+
20+
To use components, messages must be sent with the `IS_COMPONENTS_V2` flag (`1<<15`). Note that using this flag disables traditional content and embeds - all content must be sent as components instead.
21+
22+
:::info
23+
[Legacy message component behavior](/docs/components/reference#legacy-message-component-behavior) will **not** be deprecated and will continue to be available to your apps on a message-by-message basis. However, we recommend using the new components for new projects and features.
24+
:::
25+
26+
<Container>
27+
<Card title="Using Message Components" link="/docs/components/using-message-components" icon="ChatDotsIcon">
28+
A guide on sending Message Components with examples.
29+
</Card>
30+
<Card title="Using Modal Components" link="/docs/components/using-modal-components" icon="CompassIcon">
31+
A guide on sending Modal Components with examples.
32+
</Card>
33+
<Card title="Component Reference" link="/docs/components/reference" icon="BrowserIcon">
34+
Explore the Components reference documentation.
35+
</Card>
36+
</Container>
37+
38+
---
39+
40+
## Get Help & Join the Community
41+
42+
Do you have a question or want to connect with other app developers?
43+
44+
- Join our [DDevs Discord Server](https://discord.gg/discord-developers) and get help from the community, share best practices, and discover new ways to enhance your apps.

0 commit comments

Comments
 (0)