Alert

Display a brief, important message in a way that attracts the user's attention without interrupting the user's task.

import { component$, useStyles$ } from '@builder.io/qwik';
import { Alert } from 'qwik-primitives';
import styles from './styles.css?inline';

export const AlertDemo = component$(() => {
  useStyles$(styles);

  return (
    <Alert.Root class="alert-root">
      Access denied. Please contact the network administrator to view this page.
    </Alert.Root>
  );
});

Features

Import

import { Alert } from 'qwik-primitives';

Anatomy

Import the component.

import { component$ } from '@builder.io/qwik';
import { Alert } from 'qwik-primitives';

export const AlertDemo = component$(() => {
  return <Alert.Root />;
});

API Reference

Root

Contains the content for the alert. This component is based on the div element.

Props

as
Description

Change the default rendered element for the one passed as, merging their props and behavior.

Read our Composition guide for more details.

Type
FunctionComponent
Default
No default value
style
Description

The inline style for the element.

Type
CSSProperties
Default
No default value

Data attributes

[data-scope]
Values
"alert"
[data-part]
Values
"root"

Accessibility

Adheres to the Alert WAI-ARIA design pattern.