Notice

The notice components.

• Import

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

• Tag

  <tapsi-notice></tapsi-notice>

Properties

Name	Description	Type	Default Value
visible	Indicates whether the notice is visible or not.	boolean	false
heading	The title of the notice.	string	-
description	The description of the notice.	string	-
color	The color of the notice, indicating the type of message. Defaults to info.	"success" | "error" | "info" | "warning"	"info"
priority	The priority level of the notice. Defaults to high. 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	The artwork of the notice component. Defaults to icon. 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	The variant of the notice. Defaults to standard.	"standard" | "compact"	"standard"
dismissible	Indicates whether the notice can be dismissed.	boolean	false

Slots

Name	Description
actions	The actions associated with the notice component, typically a collection of tapsi-button components.
artwork	The custom artwork slot for the notice component. To display this slot, set the artwork property to custom.

TIP

You can use slot names as variables:

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

console.log(Slots.ACTIONS); // "actions"
console.log(Slots.ARTWORK); // "artwork"

Events

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

TIP

You can import custom event names:

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

element.addEventListener(ShowEvent.type, handleTapsiNoticeShow);
element.addEventListener(HideEvent.type, handleTapsiNoticeHide);