Buttons didn't align with the message content

[josejooj]

I have this following component with React + TS

function NewDiscordMessage(options: parameters) {

    console.log(options)

    return (
        <DiscordMessage author={options.author.name} avatar={options.author.avatar_url} bot>
            {formatContent(options.content)}
            {options.embed ?
                <DiscordEmbed
                    slot="embeds"
                    authorName={options.embed?.author?.name}
                    authorImage={options.embed?.author?.icon_url}
                    authorUrl={options.embed?.author?.url}
                    thumbnail={options.embed?.thumbnail?.url}
                    image={options.embed?.image?.url}
                >
                    <DiscordEmbedDescription slot="description">{formatContent(options.embed?.description)}</DiscordEmbedDescription>
                    <DiscordEmbedFooter
                        slot="footer"
                        footerImage={options.embed?.footer?.icon_url}
                    >{options.embed?.footer?.text}</DiscordEmbedFooter>
                </DiscordEmbed> : <></>}

            <DiscordAttachments slot="components">
                <DiscordActionRow>
                    {options.buttons?.map(btn => (
                        <DiscordButton type={btn.data.style !== "Danger"? btn.data.style.toLowerCase():"destructive"}>{btn.data.content}</DiscordButton>
                    ))}
                </DiscordActionRow>
            </DiscordAttachments>
        </DiscordMessage>
    )
}

Everything works fine, but for some reason the buttons are misaligned with the message...

I'm doing something wrong?

[favna]

Edit: You're missing the required DiscordMessages component

Have a look at the codesandbox examples. With the following code, which is merging 2 of the samples from codesandbox, it works just fine.

        <DiscordMessages>
          <DiscordMessage profile="skyra">
            Here are some components!
            <DiscordEmbed
              slot="embeds"
              authorImage="/sapphire.png"
              authorName="Sapphire Developers"
              authorUrl="https://sapphirejs.dev"
              color="#0F52BA"
              embedTitle="Sapphire"
              image="/sapphire.png"
              thumbnail="/sapphire.png"
              url="https://sapphirejs.dev"
            >
              <DiscordEmbedDescription slot="description">
                Sapphire is a next-gen object-oriented
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href="https://discord.js.org/"
                >
                  Discord.js
                </a>
                bot framework.
                <br />
                <br />
                Sapphire is a community driven framework that aims to give you
                all the features you need to make your Discord bot.
                <br />
                <br />
                With a history of many other Discord bot frameworks (both for
                NodeJS and other languages) to inspire Sapphire, it has become
                the ultimate modern experience of writing your code.
              </DiscordEmbedDescription>
              <DiscordEmbedFields slot="fields">
                <DiscordEmbedField fieldTitle="Created">
                  <DiscordTime>1 year ago</DiscordTime>
                </DiscordEmbedField>
                <DiscordEmbedField fieldTitle="Installation">
                  {" "}
                  yarn add @sapphire/framework{" "}
                </DiscordEmbedField>
                <DiscordEmbedField fieldTitle="Key Features">
                  <ul
                    style={{
                      paddingInlineStart: 20,
                      marginBlockStart: "0.5em"
                    }}
                  >
                    <li>
                      <div>
                        <span></span>
                      </div>
                      <div>Advanced plugin support</div>
                    </li>
                    <li>
                      <div>
                        <span></span>
                      </div>
                      <div>Supports both CommonJS and ESM</div>
                    </li>
                    <li>
                      <div>
                        <span></span>
                      </div>
                      <div>Completely modular and extendable</div>
                    </li>
                    <li>
                      <div>
                        <span></span>
                      </div>
                      <div>
                        Designed with first class TypeScript support in mind
                      </div>
                    </li>
                    <li>
                      <div>
                        <span></span>
                      </div>
                      <div>
                        Includes optional utilities that you can use in any
                        project
                      </div>
                    </li>
                  </ul>
                </DiscordEmbedField>
              </DiscordEmbedFields>
              <DiscordEmbedFooter
                slot="footer"
                footerImage="/sapphire.png"
                timestamp="03/20/2021"
              >
                Open source libraries to aid in the creation of Discord bots
              </DiscordEmbedFooter>
            </DiscordEmbed>
            <DiscordAttachments slot="components">
              <DiscordActionRow>
                <DiscordButton type="primary">Primary Button</DiscordButton>
                <DiscordButton type="secondary">Secondary Button</DiscordButton>
                <DiscordButton type="success">Green Button</DiscordButton>
                <DiscordButton type="destructive">Red Button</DiscordButton>
                <DiscordButton
                  url="https://join.skyra.pw"
                  emoji="/eyes.svg"
                  emojiName="👀"
                >
                  Link
                </DiscordButton>
              </DiscordActionRow>
              <DiscordActionRow>
                <DiscordButton type="primary" disabled>
                  Primary Button
                </DiscordButton>
                <DiscordButton type="secondary" disabled>
                  Secondary Button
                </DiscordButton>
                <DiscordButton type="success" disabled>
                  Green Button
                </DiscordButton>
                <DiscordButton type="destructive" disabled>
                  Red Button
                </DiscordButton>
                <DiscordButton
                  url="https://join.skyra.pw"
                  disabled
                  emoji="/eyes.svg"
                  emojiName="👀"
                >
                  Link
                </DiscordButton>
              </DiscordActionRow>
            </DiscordAttachments>
          </DiscordMessage>
        </DiscordMessages>

The codesandbox is linked in the README, or here: https://codesandbox.io/s/discord-components-create-react-app-64k90