eds-modal

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

In React

In Vue

Overview

EdsModal is a modal dialog component that can be toggled open or closed.

Key Features:

Displays a modal dialog with a title and customizable content.
Supports truncating the title to a specified number of lines.
Methods to programmatically control the modal’s visibility.

This component is useful for displaying overlay content in a structured and accessible manner, with controls for dynamic visibility and content truncation.

Properties

Property	Attribute	Description	Type	Default
`heading`	`title`	The title of the modal.	`string`	`''`
`inverseHeader`	`inverse-header`	Whether to use the inverse header style (light text on strong background) instead of the default.	`boolean`	`false`
`position`	`position`	Specifies the position of the modal. Acceptable values are: - `"middle"` (default): The modal is centered both vertically and horizontally. - `"top"`: The modal is positioned near the top of the viewport. - `"bottom"`: The modal is positioned near the bottom of the viewport. - `"left"`: The modal is positioned on the left side of the viewport, centered vertically. - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.	`"bottom" \| "middle" \| "top"`	`'middle'`
`size`	`size`	Size of the modal. - `"small"`: 500px max width - `"medium"` (default): 700px max width - `"large"`: 900px max width	`"large" \| "medium" \| "small"`	`'medium'`
`truncate`	`truncate`	The number of lines to truncate the title to. Set to 0 or undefined to disable truncation.	`0 \| 1 \| 2 \| 3 \| 4`	`undefined`

Methods

`close() => Promise<void>`

Closes the modal.

Returns

Type: Promise<void>

`open() => Promise<void>`

Opens the modal.

Returns

Type: Promise<void>

`toggle() => Promise<void>`

Toggles the modal open or closed.

Returns

Type: Promise<void>

Dependencies

Depends on

eds-button

Graph

graph TD;
  eds-modal --> eds-button
  eds-button --> eds-icon-wrapper
  style eds-modal fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS