# Modal (fw-modal)

Modals are used as an overlay to display information. It can also be used as confirm boxes to take user inputs.

# Usage

Open Modal Hello, Welcome to Crayons Open Small Modal This is a small modal Open Large Modal This is a large modal Open Custom Footer Modal You can customize the footer via `slots` Confirm
Show Code

# Properties

Property Attribute Description Type Default
cancelText cancel-text The text for the cancel button string 'Cancel'
customFooter custom-footer Enable custom footer boolean false
description description The title text to be displayed on the modal string undefined
hideFooter hide-footer Hides the footer boolean false
icon icon The icon to be displayed with the title string ''
size size Size of the modal "large" or "small" or "standard" 'standard'
successText success-text The text for the success button string 'OK'
titleText title-text The title text to be displayed on the modal string undefined
visible visible Toggle the visibility of the modal boolean false

# Events

Event Description Type
fwAction Triggered when the default action button is clicked. CustomEvent<void>
fwClosed Triggered when modal is closed. CustomEvent<void>

# Dependencies

# Depends on

# Graph

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

Built with ❤ at Freshworks

Last Updated: 8/27/2020, 9:01:00 AM