# Components Reference
# DiscordMessages
A wrapper for any child <discord-message> components. Must be used in order for messages to display properly.
<discord-messages>
<discord-message>...</discord-message>
</discord-messages>
TIP
To keep things short and avoid being repetitive, the <discord-messages> wrapper will be omitted from further examples on this page.
# Properties
| Prop | Type | Optional | Default Value | Description |
|---|---|---|---|---|
| light-theme | Boolean | ✅ | false | Whether to use light theme or not. |
| compact-mode | Boolean | ✅ | false | Whether to use compact mode or not. |
<discord-messages :light-theme="true">
<discord-message>Look at me I'm a beautiful butterfly</discord-message>
<discord-message>Fluttering in the sunlight 🌞</discord-message>
</discord-messages>
<discord-messages :compact-mode="true">
<discord-message>Look at me I'm a beautiful butterfly</discord-message>
<discord-message>Fluttering in the moonlight 🌝</discord-message>
<discord-message>Waiting for the day when</discord-message>
<discord-message>Compact mode would be turned on</discord-message>
</discord-messages>
# DiscordMessage
A Discord message component. The default slot is used for the message's content.
<discord-message>
Hey guys, I'm new here! Glad to be able to join you all!
</discord-message>
<discord-message author="Dawn" avatar="red">
Hi, I'm new here too!
</discord-message>
# Properties
| Prop | Type | Optional | Default Value | Description |
|---|---|---|---|---|
| author | String | ✅ | 'User' | The message author's username. |
| avatar | String | ✅ | 'blue' | The message author's avatar. Can be a shortcut string, relative path, or external link. |
| bot | Boolean | ✅ | false | Whether the message author is a bot or not. |
| edited | Boolean | ✅ | false | Whether the message has been edited or not. |
| profile | String | ✅ | The ID of the profile you want to assign to this message. | |
| role-color | String | ✅ | The message author's primary role color. Can be any CSS color value. | |
| timestamp | Date|String | ✅ | new Date() | The timestamp to use for the message date. When supplying a string, the format must be 01/31/2000. |
# Mention
A mention that can be used within messages. The default slot is used for the mention's content.
# Properties
| Prop | Type | Optional | Default Value | Description |
|---|---|---|---|---|
| highlight | Boolean | ✅ | false | Whether this entire message block should be highlighted (to emulate the "logged in user" being pinged). |
| color | String | ✅ | The color to use for this mention. Only works for role mentions and must be in hex format. | |
| profile | String | ✅ | The ID of the profile you want to assign to this message. This will either use the profile's author property to set the default slot content (if empty) , or use the profile's roleColor property to set the color for role pings. | |
| type | String | ✅ | 'user' | The type of mention this should be. This will prepend the proper prefix character. Valid values: user, channel, role |
<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
Hey, <mention>User</mention> and <mention>Dawn</mention>. Welcome to our server! Be sure to read through the <mention type="channel">rules</mention>. You can ping <mention type="role" color="#70f0b4">Support</mention> if you need help.
</discord-message>
<discord-message>
Hey there <mention :highlight="true">Sanctuary</mention>, thanks! I will!
</discord-message>
# DiscordEmbed
An embed that can be attached to the end of your messages. The default slot is used for the embed's description. The footer slot is used for the footer text.
# Properties
| Prop | Type | Optional | Default Value | Description |
|---|---|---|---|---|
| color | String | ✅ | The color to use for the embed's left border. Can be any CSS color value. | |
| author-name | String | ✅ | The author's name. | |
| author-image | String | ✅ | The author's avatar URL. | |
| author-url | String | ✅ | The URL to open when you click on the author's name. | |
| title | String | ✅ | The embed title. | |
| url | String | ✅ | The URL to open when you click on the embed title. | |
| thumbnail | String | ✅ | The thumbnail image to use. | |
| image | String | ✅ | The embed image to use (displayed at the bottom). | |
| footer-image | String | ✅ | The image to use next to the footer text. | |
| timestamp | Date|String | ✅ | The timestamp to use for the footer text. When supplying a string, the format must be 01/31/2000. |
# Notes
To ensure the embed gets displayed correctly inside your message, be sure to give it the proper slot attribute.
<discord-message>
Hi, I'm part of the normal message content.
<discord-embed slot="embeds" color="#0099ff">
Hi, I'm part of the embed message content.
</discord-embed>
</discord-message>
# EmbedFields
A wrapper for any child <embed-field> components. Must be used in order for fields to display properly.
# Notes
To ensure the embed fields gets displayed correctly inside your embed, be sure to give it the proper slot attribute.
<discord-embed slot="embeds">
Hi, I'm part of the embed message content.
<embed-fields slot="fields">
<!-- Embed fields go here -->
</embed-fields>
</discord-embed>
# EmbedField
An embed field component.
# Properties
| Prop | Type | Optional | Default Value | Description |
|---|---|---|---|---|
| title | String | ❌ | The field's title. | |
| inline | Boolean | ✅ | false | Whether this field should be displayed inline or not. |
# Notes
At least 2 consecutive fields need to be marked as inline in order for them to actually display next to each other. The maximum amount of inline fields is 3, and drops to 2 if an embed thumbnail is used.
<discord-embed slot="embeds">
Hi, I'm part of the embed message content.
<embed-fields slot="fields">
<embed-field :inline="true" title="Inline field">
Field content.
</embed-field>
<embed-field :inline="true" title="Inline field">
Field content.
</embed-field>
</embed-fields>
</discord-embed>