Display additional page content in an overlay
Ensure that usage of this component complies with accessibility guidelines:
aria-haspopup="dialog"
to the button element:<cdr-button
aria-haspopup="dialog"
>Launch modal</cdr-button>
aria-described-by
prop to point to an element that describes what the modal does: <cdr-modal aria-described-by="description" label="modal title">
<div id="description">
modal content description
</div>
</cdr-modal>
This component complies with WCAG guidelines by:
label
prop to set the aria-labelaria-hidden
and tabindex="-1"
on focusable items for all content outside of the modalopened
name
Boolean
type
N/A
default
Toggles the state of the modal. Required.
label
name
string
type
N/A
default
Text used to generate the `aria-label` attribute as well as the modal title text, if `labelSlot` is empty. Required.
showTitle
name
boolean
type
true
default
Toggles the modal title text, which comes from `label` or `labelSlot`.
ariaDescribedBy
name
string
type
'medium'
default
Text for the `aria-describedby` attribute.
id
name
string
type
null
default
Unique id for modal.
overlayClass
name
string
type
N/A
default
Adds a custom class to the `cdr-modal__overlay` div.
wrapperClass
name
string
type
N/A
default
Add a custom class to the `cdr-modal__outerWrap` div.
contentClass
name
string
type
N/A
default
Add a custom class to the `cdr-modal__innerWrap` div.
animationDuration
name
number
type
300
default
Sets animation duration for when the modal is closed.
Find more information about using Slots in the article Getting Started as a Developer.
default
name
Slot for CdrModal content.
title
name
Slot for CdrModal title.
modal
name
Slot to override the entire CdrModal content.
closed
name
$emit event fired when closing the modal.
If the title
slot is left empty, the label
prop will be rendered as the title. The title can be hidden altogether by setting showTitle
to false
.
When using the label
slot, add CdrText to use the appropriate header styles.
<template slot="title">
<cdr-text
tag="h1"
modifier="heading-600"
>Add to Cart
</cdr-text>
</template>
The modal has a default width of 640px
which converts to a fullscreen view at xs
screen sizes.
The modal content area will scroll vertically if there's enough content. The modal title does not scroll; it stays affixed to the top of the modal.
Do not use v-if
with CdrModal unless the component is wrapped with keep-alive
. CdrModal handles showing and hiding itself when toggling, so v-if
should be unneeded in most cases.
<keep-alive>
<cdr-modal
v-if="opened"
:opened="opened"
label="Add to Cart"
@closed="closed"
aria-described-by="description"
>
...
</cdr-modal>
</keep-alive>