Notice

Display notice messages that require attention.

Importing

To use the notice component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/notice";

register(); // Now the notice component is ready to use!

Web (Option 2)

import { registerNotice } from "@tapsioss/web-components";

registerNotice(); // Now the notice component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/notice/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Notice } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-notice></tapsi-notice>

React

<Notice />

Properties

Name	Attribute Name	Description	Type	Default Value
visible	visible	Indicates whether the notice is visible or not.	boolean	false
heading	heading	The title of the notice.	string	""
description	description	The description of the notice.	string	""
color	color	The color of the notice, indicating the type of message.	| "success" | "error" | "info" | "warning"	"info"
priority	priority	The priority level of the notice. High priority uses bolder colors and the role of alert for screen readers, while low priority uses lighter colors and the role of status.	"high" | "low"	"high"
artwork	artwork	The artwork of the notice component. Setting to none hides the artwork. The icon value shows a default icon based on the color, and custom enables the use of the artwork slot.	| "none" | "icon" | "custom"	"icon"
variant	variant	The variant of the notice.	"standard" | "compact"	"standard"
dismissible	dismissible	Indicates whether the notice can be dismissed.	boolean	false

Methods

Name	Description	Parameters
show	Forces the notice to display.
hide	Forces the notice to hide.

Slots

Name	Value	Description
ARTWORK	artwork	The slot for custom artwork the notice component. To display this slot, set the artwork property to custom.
ACTION	action	The slot for custom artwork the notice component. To display this slot, set the artwork property to custom.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { NoticeSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/notice";

React

// Option 1
import { NoticeSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Notice";

Events

Name	Description	Type	Bubbles	Cancelable
show	Fires when the tooltip should be visible.	ShowEvent	❌	❌
hide	Fires when the tooltip should be hidden.	HideEvent	❌	❌

TIP

Event details are available as JavaScript variables:

// Option 1
import {
 ShowEvent,
 HideEvent
} from "@tapsioss/web-components/notice";

// Option 2
import {
 NoticeShowEvent,
 NoticeHideEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(ShowEvent.type, handleShow);
element.addEventListener(HideEvent.type, handleHide);

// Option 2
element.addEventListener(NoticeShowEvent.type, handleShow);
element.addEventListener(NoticeHideEvent.type, handleHide);