Rank.top Logo
Rank.top
UX Guide

Slash Commands, Components, and Modals: UX Best Practices with Examples

Rank.top Team
August 2025

Done right, interactions make bots feel fast and friendly. This guide covers practical UX patterns and the official limits you must respect for slash commands, buttons/selects, and modals - plus concrete examples you can copy.

Table of Contents

Slash Commands: Patterns & Constraints

Core constraints (per Discord docs)

  • Respond within 3 seconds or send a deferred response, then follow up.
  • Interaction tokens are valid for follow‑ups for ~15 minutes.
  • Command names: lowercase, 1–32 chars; letters, numbers, underscores, hyphens.
  • Up to 25 options on a command/subcommand; autocomplete can return up to 25 choices.
Docs: Receiving & Responding · Application Commands · Autocomplete

UX best practices

  • Use verbs first and keep names short: /setup, /ticket open, /config set.
  • Prefer options + autocomplete over free‑text to reduce errors.
  • Immediately acknowledge with ephemeral feedback and progress ("Working…", "Opening modal…").
  • Route complex input to a modal instead of chaining multiple follow‑ups.

Components (Buttons & Selects)

Limits that affect layout

  • Each message: up to 5 action rows.
  • Buttons: up to 5 per row.
  • Select menus: at most 1 per row (string, user, role, mentionable, or channel).
  • Text inputs only appear inside modals, not in messages.
Docs: Message Components

UX best practices

  • Group related actions on one row; keep destructive actions separated and red.
  • Disable buttons while processing to prevent double‑submits.
  • Use selects for long lists (channels/roles), with sensible defaults and placeholders.
  • Keep custom_id short but descriptive; include versioning if formats change.

Modals (Text Inputs)

Constraints to design for

  • Title max ~45 chars; modal custom_id max ~100 chars.
  • Up to 5 text inputs (each in its own action row).
  • Text input label max ~45; placeholder max ~100; value length up to ~4000.
  • Submit creates a new interaction - acknowledge quickly just like any other.
Docs: Modals

UX best practices

  • Use modals for multi‑field input or when validation needs focused context.
  • Keep labels clear; add examples in placeholders; prefill when possible.
  • Validate on submit; return specific, actionable errors (ephemeral).
  • Avoid long essays - split into steps or use selects for categorical choices.

End‑to‑End UX Examples

1) Server setup in two steps

  1. /setup acks ephemerally ("Select a channel and role").
  2. Message shows one row with a channel select and a second row with a role select.
  3. Confirm button posts a public success message; store channel_id/role_id.

2) Feedback via modal

  1. /feedback defers (ephemeral), then opens a modal.
  2. Modal: title "Send Feedback", fields "Subject" (short) and "Details" (paragraph).
  3. On submit: validate, send "Thanks!" ephemerally; forward payload to a staff channel.

3) Safer destructive actions

  1. "Delete" button sends a new ephemeral confirmation with red buttons.
  2. Require a second explicit confirm; disable buttons after click; show final status.

Launch Checklist & Anti‑Patterns

Do this

  • Always ack in ≤3s (immediate or deferred).
  • Prefer selects/autocomplete over free text.
  • Keep rows consistent, one action per button.
  • Use modals for multi‑field input.

Avoid this

  • Leaving users waiting without feedback.
  • Overloading a row with mixed, unrelated actions.
  • Long text prompts instead of a modal with fields.
  • Ignoring edge cases (no permissions, empty results, etc.).

Turn great UX into growth

List your bot on Rank.top and enable revenue sharing - then scale reach with flexible ads when you're ready.

List Your BotRevenue SharingAdvertise

Reference: Receiving & Responding · Application Commands · Message Components · Modals · Autocomplete