Go to AntUIKit homepage

Prompts

A set of suggested questions that starts or continues a chat when the reader clicks one.

Preview in FigmaLLMs

Accessibility

What Prompts does for you, and what it leaves to the page around it.

What Prompts renders

Every part of Prompts is a <div>, except the text. The title is an <h5>, each label is an <h6> and each description is a <p>.
  • A prompt has no role and no tabIndex. A screen reader reads it as a heading and a paragraph, and does not say it can be clicked.
  • Every label shows up in the page's heading list. Five prompts add five h6 headings to the outline, between your own headings.
  • The list is not a <ul>, so nothing announces how many prompts there are.

Making the prompts reachable by keyboard

A prompt only answers a mouse click or a tap. Tab skips it, and Enter and Space do nothing, so a keyboard user cannot pick one. You have to add that yourself.
Put a <button> in the label. It takes focus and answers Enter and Space, and its click reaches the prompt, so onItemClick fires the same way it does for the mouse.
1
const items = questions.map((q) => ({
2
key: q.id,
3
label: (
4
<button type="button" className="text-start">
5
{q.text}
6
</button>
7
),
8
}))
  • Reset the button's own look with your classes so it reads as the prompt's text, and keep a visible focus ring.
  • For a disabled prompt, put disabled on the button too. The item's own disabled only stops the click and grays it out, and says nothing to a screen reader.
  • Give a parent with children no button. It is not clickable, so its label stays plain text.

Names and icons

  • The label is the prompt's name. Write it as the full question, so it makes sense read out of context.
  • An icon from Icon is hidden from screen readers by default, which is right for a glyph that only decorates. Do not use an icon on its own to carry meaning.
  • Give the set a title. It tells a screen reader user what the buttons that follow are for.

Contrast

  • The title and every description under a label use the tertiary text color, which falls under 4.5:1 on a white card at body size. Keep the words that matter in the label.
  • A disabled prompt grays its label to the same tertiary color, on a gray fill.
  • Every color here comes from the active theme, so check a custom seed yourself. The Tokens tab lists which tokens Prompts reads.

Motion

fadeIn and fadeInLeft animate the prompts when they mount, over about a second. Both are off unless you set them.
  • They do not follow the reader's reduced motion setting. Check prefers-reduced-motion yourself and leave both off when it is set.
  • Hover and press change the background over motionDurationSlow. Setting motion: false in your token file's seed turns that off.
MermaidSender
© 2026 AntUIKit . All rights reserved.