Components

Available Builders

import {
  // Action Row
  makeActionRow,
  // Buttons
  makeButton,
  makeLinkButton,
  makePremiumButton,
  // Selects
  makeStringSelect,
  makeUserSelect,
  makeRoleSelect,
  makeMentionableSelect,
  makeChannelSelect,
  // Modal Inputs
  makeTextInput,
  makeFileUpload,
  makeRadioGroup,
  makeCheckboxGroup,
  makeCheckbox,
  // Layout, Content
  makeSection,
  makeTextDisplay,
  makeThumbnail,
  makeMediaGallery,
  makeFile,
  makeSeparator,
  makeContainer,
  makeLabel,
  // Child Component
  makeStringSelectOption,
  makeMediaGalleryItem,
  makeUnfurledMediaItem,
  makeRadioGroupOption,
  makeCheckboxGroupOption,
} from 'discord-hono'

Please refer to the Official Docs for the roles of each component.

Note

For modal-related content, see the Modal page.

Message Components

import { DiscordHono, makeActionRow, makeButton } from 'discord-hono'

const app = new DiscordHono().command('component', c =>
  c.res({
    content: 'components',
    components: [
      makeActionRow([makeButton('id1', '1'), makeButton('id2', '22')]),
      makeActionRow([makeButton('id3', '333'), makeButton('id4', '4444')]),
    ],
  }),
)

Discord Bot Response

components
[1][22]
[333][4444]

Buttons

import {
  makeActionRow,
  makeButton,
  makeLinkButton,
  buttonStyle,
} from 'discord-hono'

const components = [
  makeActionRow([
    makeButton('custom_id', 'label'),
    makeButton('button', ['✅', 'button'])
      .custom_value('value')
      .style(buttonStyle.Secondary)
      .disabled(true),
    makeLinkButton('https://example.com', 'link'),
  ]),
]

custom_id is used to identify app.component().
Also, custom_id cannot include ;.

If your editor supports it, you can view the method list by typing ..

For the details of each method, see the Official Docs.

.custom_value()

.custom_value() is a library-specific value passed to the button handler. It can be up to 99 characters including custom_id.

import {
  makeActionRow,
  makeButton,
  makeSlashCommand,
  makeStringOption,
} from 'discord-hono'
import { factory } from '../init'

export const command_command = factory.command(
  makeSlashCommand('command', 'description').options([
    makeStringOption('value', 'value passed to button').required(true),
  ]),
  c =>
    c.res({
      content: 'button',
      components: [
        makeActionRow([component_button.component.custom_value(c.var.value)]),
      ],
    }),
)

export const component_button = factory.component(
  makeButton('button', ['✅', 'button']),
  c => c.update().res(`value: ${c.ref.custom_value}`),
)

By using .custom_value(), you can pass required values from the command to the button handler.

The pagination example uses this feature.

The same pattern works for select menus and other components.

Selects

import {
  makeActionRow,
  makeStringSelect,
  makeChannelSelect,
} from 'discord-hono'

const components = [
  makeActionRow([
    makeStringSelect('custom_id', [
      ['value', 'label'],
      ['value2', ['👉', 'label2']],
    ]),
    makeChannelSelect('channel_custom_id').channel_types([0]),
  ]),
]

unique-id is used to identify app.component().
Also, unique-id cannot include ;.

If your editor supports it, you can view the method list by typing ..

For the details of each method, see the Official Docs.

.custom_value() is a library-specific value passed to the component. It can be up to 99 characters including custom_id.

Getting input values

import { makeStringSelect } from 'discord-hono'
import { factory } from '../init'

export const component_select = factory.component(
  makeStringSelect('select', [
    ['value', 'label'],
    ['value2', ['👉', 'label2']],
  ]),
  c => c.update().res(`value: ${c.ref.values?.[0]}`),
)

Components V2

When using Components V2, make sure to specify c.flags('IS_COMPONENTS_V2').

import {
  buttonStyle,
  makeActionRow,
  makeButton,
  makeContainer,
  makeMediaGallery,
  makeSection,
  makeSeparator,
  makeSlashCommand,
  makeTextDisplay,
  makeThumbnail,
} from 'discord-hono'
import { factory } from '../init'

export const command_components_v2 = factory.command(
  makeSlashCommand('components_v2', 'response components_v2'),
  async c =>
    c.flags('EPHEMERAL', 'IS_COMPONENTS_V2').resDefer(async () => {
      const image = await fetch('https://luis.fun/images/hono.webp')
      const blob = new Blob([await image.arrayBuffer()])
      const res = await c
        .followup(
          {
            components: [
              makeTextDisplay('text top'),
              makeContainer([
                makeActionRow([component_delete.component]),
                makeSeparator(),
                makeTextDisplay('container - text'),
                makeSection(
                  [
                    makeTextDisplay('container - section - text'),
                    makeTextDisplay('container - section - text2'),
                  ],
                  makeThumbnail('attachment://image.webp'),
                ),
                makeTextDisplay('container - text2'),
                makeMediaGallery(['attachment://image.webp']),
              ]),
            ],
          },
          { blob, name: 'image.webp' },
        )
        .then(r => r.json())
      console.log(res)
    }),
)

export const component_delete = factory.component(
  makeButton('delete', ['🗑️', 'Delete']).style(buttonStyle.Secondary),
  c => c.update().resDefer(c => c.followup()),
)