Go to AntUIKit homepage

Welcome

The greeting at the top of an empty chat: who the assistant is and what it can help with.

Preview in FigmaLLMs

Accessibility

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

What Welcome renders

The root is a plain <div> with no role. The title is an <h4>, and the description is a <span> of text. Nothing in it is focusable unless you put a control in extra.
  • The heading level is fixed at 4. On a page where the greeting is the main heading, or sits under an <h1> with nothing in between, the outline skips levels. The level cannot be changed, so keep a real heading for the chat view above the greeting, visually hidden if the design has no room for it.
  • Welcome is static content and is read in document order. It is not a live region, so it is not announced when it appears.

The icon

The icon slot renders what you pass, so its accessible name is yours to set.
  • A URL string becomes an <img> with the alt text “icon”, which a screen reader reads aloud and which tells the reader nothing. Pass your own <img> instead.
  • When the title already names the assistant, the icon is decoration. Give an image an empty alt, and an avatar with initials aria-hidden, so the name is not read twice.
  • When the icon is the only place the assistant's name appears, give it alt text with that name.

Actions in extra

extra is where the greeting's controls go, and they bring their own focus and keys.
  • Icon-only buttons need an aria-label: “New chat”, “More”. The glyph alone has no name.
  • The actions come after the title in the tab order and in reading order, which is where a reader expects them.

Contrast

The filled variant puts the title and description, both in the theme's main text color, on a light fill from the theme.
  • Check a custom theme in both light and dark mode. A darker fill or a lighter text color can bring the pair under 4.5:1 with nothing warning you.
  • If you color the description with classNames, check that pairing too. On a colored or image background, use borderless only when the area behind the text is plain enough to read on.
ThoughtChainXNotification
© 2026 AntUIKit . All rights reserved.