Modal Component

A modal dialog component.

Properties

Name	Type	Default	Description
open	boolean	false	Indicates whether the modal is open.
title	string	''	Sets the title of the modal. If not provided, no title is displayed.
description	string	''	Provides a description or content text for the modal. If empty, no description is shown.
alignment	string	'right'	Determines the alignment of the modal's content. Can be 'right', or 'center'.
image	string	undefined	URL of an image to display within the modal. If specified, the image is shown above the content, if not pass the icon slot.

Slots

Name	Description
icon	the icon slot of the modal dialog.
actions	the actions slot of the modal dialog.

CSS Parts

Name	Description
overlay	The overlay background when the modal is open.
dialog	The main container for the modal dialog.
image-container	The container of the image element, a div.
image	The image element, a img.
icon	The container of the icon slot, a div.
content	The wrapper around title and description, a div.
title	The title element, a span.
description	The description element, a p.
actions	The container of the actions slot, a div.

Check this link to learn how to use CSS parts for Modal Component.

CSS Properties

Token	Default	Description
--tap-dialog-color-surface-overlay	--tap-sys-color-surface-overlay-dark	The background color of the overlay.
--tap-dialog-color-surface-primary	--tap-sys-color-surface-primary	The background color of the modal dialog.
--tap-dialog-radius	--tap-sys-radius-6	The border radius of the modal dialog.
--tap-dialog-icon-top-margin	--tap-sys-spacing-8	The top margin of the icon.
--tap-dialog-image-container-background-color	--tap-palette-gray-100	The background color of the image container.
--tap-dialog-content-vertical-padding	--tap-sys-spacing-4	The vertical padding of the content.
--tap-dialog-content-horizontal-padding	--tap-sys-spacing-6	The horizontal padding of the content.
--tap-dialog-content-vertical-margin	--tap-sys-spacing-6	The vertical margin of the content.
--tap-dialog-content-horizontal-margin	-	The horizontal margin of the content.
--tap-dialog-title-font-size	--tap-sys-typography-headline-sm-size	The font size of the title in the dialog modal.
--tap-dialog-title-font-weight	--tap-sys-typography-headline-sm-weight	The font weight of title in the dialog modal.
--tap-dialog-title-line-height	--tap-sys-typography-headline-sm-height	The line height of title in the dialog modal.
--tap-dialog-description-margin	-	The margin of the description in the dialog modal.
--tap-dialog-description-padding-top	--tap-sys-spacing-4	The top padding of the description in the dialog modal.
--tap-dialog-description-font-size	--tap-sys-typography-body-md-size	The font size of the description in the dialog modal.
--tap-dialog-description-font-weight	--tap-sys-typography-body-md-weight	The font weight of the description in the dialog modal.
--tap-dialog-description-line-height	--tap-sys-typography-body-md-height	The line height of the description in the dialog modal.
--tap-dialog-description-color	--tap-palette-gray-500	The color of the description in the dialog modal.
--tap-dialog-actions-padding	--tap-sys-spacing-6	The padding of the actions in the dialog modal.