Skip to content

🧭 Components [WIP]

This page will include a tutorial & examples for each component available on DiSky. Keep in mind some components can only be used in a specific context!

Understanding the layout

A component is a special element on Discord that can be interacted with. There's only two usage of components:

  • In a message (with other content, or just the component)
  • In a modal

There's one special component though: buttons. They do not take the whole message's width, so multiple buttons can be added within the same line.

A row (that is taking the maximum width possible) is called an ActionRow, and is, for instance:

  • Up to 5 buttons
  • One select menu/dropdown

One message can contain up to 5 action rows!

Components

Buttons

Buttons are the most common component, and can be used in a message only. They can be used to trigger an action.

There's different style and colors for buttons. Those are:

Button Styles

As you can see, there's 5 styles:

  • Primary
  • Secondary
  • Success
  • Danger
  • Link

Plus, buttons can be enabled or disabled for each style.

Creating a button

First thing first, we have to create our button. Here's the different ways to do it:

set {_btn} to new primary button with id "test" named "Click me!"

set {_btn} to new secondary button with id "test" named "Click me!"

set {_btn} to new success button with id "test" named "Click me!"

set {_btn} to new danger button with id "test" named "Click me!"

set {_btn} to new link button with url "https://google.com" named "Open Google!"

Toggle enable/disable state

If you want the disabled version of a button, simply add the disabled keyword before the button keyword:

set {_btn} to new disabled primary button with id "test" named "Click me!"