Notice Component
A notice/alert component is a user interface element that displays important messages or alerts to inform or warn users about specific events or actions.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'success' | 'error' | 'info' | 'warning' | 'inverse' | 'inverse' | The variant of the notice. Defaults to inverse. |
priority | 'high' | 'low' | 'high' | The priority of the notice. Defaults to high. Bolder colors are used with high priority whereas lighter colors are used for 'low' priority notices. |
dismissable | boolean | false | Indicates whether the notice can be dismissed or not. When dismissable, the dismiss button is rendered and emits 'dismiss' event upon click. |
undefined | string | undefined | undefined |
Slots
| Name | Description |
|---|---|
default | notice text |
actions | slot actions |
CSS Parts
| Name | Description |
|---|---|
notice | The root container of the notice component a div. |
icon | The container of the icon, a span. |
content-root | The wrapper around title, message and actions, a div. |
message | The message element, a p. |
title | The title element, a p. |
actions | The actions slot, a slot. |
dismiss | The dismiss button, a button. |
Check this link to learn how to use CSS parts for Notice Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-notice-width | 100% | The width of the notice component. |
--tap-notice-height | auto | The height of the notice component. |
--tap-notice-gap | --tap-sys-spacing-5 | The default gap between horizontal items of the notice. |
--tap-notice-radius | --tap-sys-radius-3 | The default border radius of the notice. |
--tap-notice-vertical-padding | --tap-sys-spacing-6 | The default vertical padding of the notice. |
--tap-notice-horizontal-padding | --tap-sys-spacing-5 | The default horizontal padding of the notice. |
--tap-font-family | --tap-sys-font-family | The default font used for tapsi web components. |
--tap-notice-actions-margin-top | --tap-sys-spacing-4 | The space between message and action buttons if there are any. |
--tap-notice-title-font-size | --tap-sys-typography-label-md-size | - |
--tap-notice-title-line-height | --tap-sys-typography-label-md-height | - |
--tap-notice-title-font-weight | --tap-sys-typography-label-md-weight | - |
--tap-notice-message-font-size | --tap-sys-typography-label-sm-size | - |
--tap-notice-message-line-height | --tap-sys-typography-label-sm-height | - |
--tap-notice-message-font-weight | --tap-sys-typography-label-sm-weight | - |
--tap-notice-message-font-weight | --tap-sys-typography-label-sm-weight | - |
--tap-notice-[variant]-[priority]-color | - | The text and icon color in the specified variant and high priority. The icon color in the specified variant and low priority. |
--tap-notice-[variant]-[priority]-bg-color | - | The background color in the specified variant and priority. |
--tap-notice-title-low-color | --tap-sys-color-content-primary | The color of the title in the low priority mode (overrides --tap-notice-[variant]-[priority]-color). |
--tap-notice-message-low-color | --tap-sys-color-content-secondary | The color of the message in the low priority mode (overrides --tap-notice-[variant]-[priority]-color). |
--tap-notice-dismiss-low-color | --tap-sys-color-content-secondary | The color of the dismiss button in the low priority mode (overrides --tap-notice-[variant]-[priority]-color). |
Events
| Name | Description |
|---|---|
dismiss | Fires when the dismiss button is clicked (if dismissable). |