Alert

The Alert component is used to display feedback messages in the AR/VR environment. It communicates important information without interrupting the user’s spatial experience.

Alert can be styled using semantic states (success, warning, error, info) or customized manually through color and theme properties. It supports optional titles, icons, and dismiss functionality, making them suitable for both passive notifications and interactive feedback scenarios.

Examples

Basic Alert

This example demonstrates the default usage of the alert component. It displays a simple alert with a light theme and a content message.

import "spatial-design-system/primitives/ar-alert.js";

<a-ar-alert 
    position="0 1.6 -1.5"
    mode="light"
    content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!" 
></a-ar-alert>

Closable Alert

This example shows an alert with a title, outlined style, and close button enabled. When closable is set to true, a dismiss icon appears in the top-right corner, allowing the user to manually hide the alert. The outlined prop switches the appearance from a solid background to a bordered style, making it visually lighter and less intrusive.

import "spatial-design-system/primitives/ar-alert.js";

<a-ar-alert 
    position="0 1.6 -1.5"
    title="Alert Title"
    content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!" 
    closable="true"
    outlined="true"
></a-ar-alert>

Customized State

This example demonstrates how different states affect the alert’s visual styling. The state prop automatically applies predefined colors and styling for specific contexts:

• error – indicates a critical problem
• warning – highlights a potential issue

When state is defined, it overrides manual color configuration (color, mode) to ensure visual consistency across the design system.

import "spatial-design-system/primitives/ar-alert.js";

<a-ar-alert 
    position="0 1.2 -1.5"
    title="Alert Title"
    content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!" 
    state="error"
    outlined="true"
    closable="true"
></a-ar-alert>
    <a-ar-alert 
    position="0 1.9 -1.5"
    title="Alert Title"
    content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!" 
    state="warning"
    outlined="true"
    closable="true"
></a-ar-alert>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the visibility of the alert. When false, the component is hidden.
position	number[]	0 0 0	Specifies the alert's position.
opacity	number	1	Specifies the opacity of the component.
state	string (success, warning, error, info)	""	Indicates the current state of the component by appling predefined styling. When set, it overrides other appearance-related properties (color, mode) to reflect important statuses such as errors or warnings.
mode	string (light, dark)	""	Specifies the color scheme of the alert, supporting either a light or dark theme.
color	string (blue, #fff)	#00BA92	Defines the primary color of the alert, affecting elements such as text and background.
textcolor	string	black	Specifies the color of the alert's text. If the contrast with the background is insufficient, the text color will not be applied.
title	string	""	Defines the title displayed at the top of the alert.
content	string	""	Defines the main message content of the alert.
prependicon	string	""	Defines the icon to be displayed within the alert. If set, the icon appears before the alert’s title.
closable	string	""	When true, displays a close icon in the top-right corner that allows the alert to be dismissed.
outlined	boolean	false	When enabled, the alert is displayed with an outline instead of a solid background.