Primitives

Live status

Always-mounted polite status region that announces changes to assistive technology.

Composition

Keep it mounted and change only its message.

First install and activate one skin. Core deliberately contains no visual token defaults.

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/live-status.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/live-status.json

Primary installed source

src/registry/sources/control-ui/ui/live-status.tsx

import type { ComponentProps } from "react";

import { cn } from "@/components/control-ui/lib/cn";

export type LiveStatusProps = Omit<ComponentProps<"span">, "role" | "children"> & { message: string };

export function LiveStatus({ message, className, ...props }: LiveStatusProps) {

return (

<span

{...props}

role="status"

aria-live="polite"

aria-atomic="true"

data-control-ui="live-status"

data-slot="root"

className={cn("sr-only", className)}

>

{message}

</span>

);

}