Skip to content
Block Kit for React
Esc
↑↓navigate↵open⌘Jpreview
On this page

Icon button

A compact, icon-only button for a context_actions row.

icon_button renders a single glyph with no visible label, with the label available as a tooltip and as the accessible name. It’s built for the trailing row of small actions under an AI-generated message: pair it with feedback buttons inside a context_actions block, or drop it into an actions block on its own.

Your AppAPP
onActionInteract with the preview.

Fields

PropType
typestring

Always `icon_button`.

Typestring
iconstring

The icon to show, e.g. "trash". See "Supported icons" below.

Typestring
textPlainTextElement

Shown as a tooltip on hover, and used as the accessible name when accessibility_label is absent.

TypePlainTextElement
action_id?string

Identifies this action in the interaction payload. Must be unique within the block. Maximum length is 255 characters.

Typestring
value?string

Sent back in the interaction payload when the button is clicked.

Typestring
accessibility_label?string

Read by screen readers instead of `text`. Maximum length is 75 characters.

Typestring
confirm?ConfirmationDialog

Shows a confirmation dialog before the click is dispatched. See Confirmation dialogs.

TypeConfirmationDialog

Supported icons

This library renders a fixed set of icon names with an inline glyph; any other name falls back to a generic kebab icon rather than rendering nothing:

trash, delete, calendar, clock, time, external-link, link, workflow, more, chevron-down.

Examples

On its own in an actions block

Your AppAPP
onActionInteract with the preview.

Alongside feedback buttons

The icon button is designed to sit next to feedback buttons in a context_actions row, as Slack does under an assistant message.

Your AppAPP
onActionInteract with the preview.

With a confirmation dialog

Your AppAPP
onActionInteract with the preview.

Interactivity

Clicking the button (after any confirm dialog is accepted) calls onAction with an icon_button action:

{
  "type": "icon_button",
  "action_id": "remove",
  "block_id": "b1",
  "action_ts": "1706000000.000100",
  "value": "row-1"
}

value is only included when the element sets it. Like a button, icon_button doesn’t write to state.values: it’s a one-shot action.

Was this page helpful?