Utilities

Announce

Announces messages to screen readers.

Features

    Mirrors visual alert content in an `aria-live` container for proper screen reader support.

Installation

Install the component from your command line.

npm install @radix-ui/react-announce

Anatomy

Import the component.

import * as Announce from '@radix-ui/react-announce';
export default () => <Announce.Root />;

Basic example

Use the announce primitive.

import * as Announce from '@radix-ui/react-announce';
export default () => <Announce.Root>Welcome to Radix.</Announce.Root>;

API Reference

Root

Contains the content to announce.

PropTypeDefault
asChildbooleanfalse
aria-atomicenumNo default value
aria-relevantenumNo default value
regionIdentifierstringNo default value
roleenumNo default value
typeenum"polite"