TkxAlert

import { TkxAlert } from 'tekivex-ui';

<TkxAlert variant="info">Update available — restart to apply.</TkxAlert>

Variants

Information message — does not interrupt screen readers.

Operation completed successfully.

Disk space low — clean up old files.

Connection lost — retrying. (announces assertively)

<TkxAlert variant="info">Information message</TkxAlert>
<TkxAlert variant="success">Operation completed</TkxAlert>
<TkxAlert variant="warning">Disk space low</TkxAlert>
<TkxAlert variant="danger">Connection lost — retrying</TkxAlert>

The variant determines both the visual style and the WAI-ARIA role:

Variant	Role	Announcement
`info`	`status`	polite — does not interrupt
`success`	`status`	polite
`warning`	`status`	polite
`danger`	`alert`	assertive — interrupts current speech

With title

Deploy succeeded

Your changes are live at my-app.example.com.

<TkxAlert variant="success" title="Deploy succeeded">
  Your changes are live at <code>my-app.example.com</code>.
</TkxAlert>

Dismissible

Beta feature

This feature may change without notice.

const [open, setOpen] = useState(true);

{open && (
  <TkxAlert
    variant="warning"
    title="Beta feature"
    onClose={() => setOpen(false)}
  >
    This feature may change without notice.
  </TkxAlert>
)}

The close button gets aria-label from the active locale (defaults to “Close”).

RSC compatible

TkxAlert is one of the 13 components that render in Next.js Server Components without 'use client' — useful for status messages from searchParams or server-fetched data.

Props

Prop	Type	Required	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	yes	Visual + role mapping.
`title`	`ReactNode`		Bold heading row.
`onClose`	`() => void`		Renders the close button.
`icon`	`ReactNode`		Override the default per-variant icon.
`children`	`ReactNode`	yes	Body content.

Source

src/components/TkxAlert.tsx