Skip to content

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:

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

register(); // Now the notice component is ready to use!
ts
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:

ts
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.

ts
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:

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

Component Usage

html
<tapsi-notice></tapsi-notice>
tsx
<Notice />

Properties

NameAttribute NameDescriptionTypeDefault Value
visiblevisibleIndicates whether the notice is visible or not.booleanfalse
headingheadingThe title of the notice.string""
descriptiondescriptionThe description of the notice.string""
colorcolorThe color of the notice, indicating the type of message.| "success"
| "error"
| "info"
| "warning"
"info"
prioritypriorityThe 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"
artworkartworkThe 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"
variantvariantThe variant of the notice."standard" | "compact""standard"
dismissibledismissibleIndicates whether the notice can be dismissed.booleanfalse

Methods

NameDescriptionParameters
showForces the notice to display.
hideForces the notice to hide.

Slots

NameValueDescription
ARTWORKartworkThe slot for custom artwork the notice component. To display this slot, set the artwork property to custom.
ACTIONactionThe 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:

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

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

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

Events

NameDescriptionTypeBubblesCancelable
showFires when the tooltip should be visible.ShowEvent
hideFires when the tooltip should be hidden.HideEvent

TIP

Event details are available as JavaScript variables:

ts
// 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:

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

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

Created with 🧡