Alert

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

Access denied. Please contact the network administrator to view this page.

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>
  );
});

.alert-root {
  padding: 1rem;
  background-color: #feebec;
  color: #c40006d3;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0em;
  border-radius: 0.5rem;
}

.alert-root::selection {
  background-color: #ff000632;
}

Features

Adheres to the Alert WAI-ARIA design pattern .

Import

import { Alert } from 'qwik-primitives';

Anatomy

Import the component.

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

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

API Reference

Root

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

Prop	Default	Type
`as`	No default value	`FunctionComponent` Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.
`style`	No default value	`CSSProperties` The inline style for the element.

Data attribute	Values
`[data-scope]`	`"alert"`
`[data-part]`	`"root"`

Accessibility

Adheres to the Alert WAI-ARIA design pattern.