Modal

yarn add @clayui/modal

A modal is a secondary window that communicates or provides an action inside the same process.

useModal hook
- Usage
Header
Provider
API

You may want to compose your content and customize with your use cases or add your own components while still keeping the logic of a modal.

Code Sample (expand to see it)

useModal hook

The useModal hook is required to create a Modal component in Clay, it is responsible for communicating with ClayModal and controlling states to make animations, this is necessary because Modal needs animation when opening and closing so we need to delay calls of the onClose so you can safely control Modal's visibility or do other things.

useModal returns a signature with observer and onClose:

observer - Observer is the communication channel that connects ClayModal with useModal.
onClose - Callback is called after Modal's close animation.

const {observer, onClose} = useModal({
	onClose: () => setVisible(false),
});

To avoid future problems, do not use the information or change the values of `observer`, it is considered a bad practice.

To prevent Modal from closing before animation always use the onClose method returned by useModal.

<ClayModal.Footer
-   last={<ClayButton onClick={() => setVisible(false)}>{"Primary"}</ClayButton>}
+   last={<ClayButton onClick={onClose}>{"Primary"}</ClayButton>}
/>

Usage

useModal is a hook so it implies that you cannot use ClayModal directly in a class component. If you'd like to use it in a class component, try the recommended strategy below.

Wrap ClayModal and useModal in a function component.

const ModalWithDialog = ({visible, onClose, title, body}) => {
    const { observer, onClose: close } = useModal({
        onClose: onVisible,
    });

    if (!visible) {
        return;
    }

    return (
        <ClayModal
            observer={observer}
            spritemap={spritemap}
        >
            <ClayModal.Header>{title}</ClayModal.Header>
            <ClayModal.Body>
                {body}
            </ClayModal.Body>
            <ClayModal.Footer
                last={<ClayButton onClick={close}>{"Close"}</ClayButton>}
            />
        </ClayModal>
    );
};

// This is pseudocode
class Page extends Component {
    render() {
        return (
            <>
                <ModalWithDialog visible={this.state.visible} onClose={() => this.setVisible(false)} title={...} body={...} />
                <ClayButton displayType="primary" onClick={() => this.setVisible(true)}>
                    {"Open modal"}
                </ClayButton>
            <>
        );
    }
}

useModal may be lost if you raise the visible condition above the hook, if Modal happens to be unmounted at the same time as the component. Ideally the hook is not unmounted every time Modal is opened and closed.

ClayModal.Header offers two different APIs for use by toggling the prop withTitle. By default(withTitle={true}), ClayModal.Header behaves like a high-level component. If you want to use the lower-level components in Header, all you need to do is set withTitle={false}.

Here is an example of both APIs:

Code Sample (expand to see it)

Provider

When your application uses a lot of modals, you can use <ClayModalProvider /> to have only one open Modal on the screen and the component centered on your application, you can invoke the modal from the context through the API. It is not recommended to have multiple modals open at the same time.

Add in the project root:

<ClayModalProvider spritemap={spritemap}>
	<MyApp />
</ClayModalProvider>

In any part of your application you can invoke modal.

import {Context} from '@clayui/modal';
import ClayButton from '@clayui/button';

const MyApp = () => {
	const [state, dispatch] = useContext(Context);

	return (
		<ClayButton
			displayType="primary"
			onClick={() =>
				dispatch({
					payload: {
						body: <h1>{'Hello world!'}</h1>,
						footer: [
							,
							,
							<ClayButton key={3} onClick={state.onClose}>
								{'Primary'}
							</ClayButton>,
						],
						header: 'Title',
						size: 'lg',
					},
					type: 1,
				})
			}
		>
			{'Open modal'}
		</ClayButton>
	);
};

Provider contains two different states that you can control:

Close - 0
Open - 1

The context signature is similar to a useReducer, contains state and dispatch.

const [state, dispatch] = useContext(Context);

dispatch({payload: {...}, type: 1});

state returns all values that are passed to dispatch payload and you can pass body, footer, header, size, status and url to payload.

API

ClayModal

Property	Type	Required	Description
center	boolean	false	Flag indicating to vertically center the modal.
size	Size	false	The size of element modal.
observer	Observer	true	Observer is Modal's communication system with `useModal` hook, adds observer from `useModal` hook here.
zIndex	number	false	Allows setting a custom z-index value, overriding the default one which is 1040, modal body z-index will be +10 of this value

ClayModal.Body

Property	Type	Required	Default	Description
iFrameProps	React.HTMLAttributes<HTMLIFrameElement>	false	{}	Props to add to the iframe element
scrollable	boolean	false		Flag to indicate if body should be a fixed height with a scrollable overflow.
url	string	false		Url to place an iframe in the body of the modal.

Property	Type	Required	Description
first	React.ReactElement	false	Sets the elements that are positioned `first following the LTR direction on the footer.
last	React.ReactElement	false	Sets the elements that are positioned `last` following the LTR direction on the footer.
middle	React.ReactElement	false	Sets the elements that are positioned in the middle of the footer.

Property	Type	Required	Default	Description
withTitle	boolean	false	true	Flag for indicating if you want to use the Header its children being the title. Set to `false` if you want to use this as a low-level component.

ClayModal.Item

Property	Type	Required	Default	Description
shrink	boolean	false		Flag for indicating if item should autofitting the width

ClayModal.ItemGroup

Extends from React.HTMLAttributes<HTMLDivElement>

ClayModal.Subtitle

Extends from React.HTMLAttributes<HTMLDivElement>

ClayModal.SubtitleSection

Extends from React.HTMLAttributes<HTMLDivElement>

ClayModal.Title

Extends from React.HTMLAttributes<HTMLDivElement>

ClayModal.TitleSection

Extends from React.HTMLAttributes<HTMLDivElement>

ClayModal.TitleIndicator

Extends from React.HTMLAttributes<HTMLDivElement>

Sizes

Small

300px wide modal window, expands full width of screen at 575px and below.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModal"
	data-toggle="modal"
	type="button"
>
	Small Modal
</button>
<div
	aria-labelledby="claySmallModalLabel"
	class="fade modal"
	id="claySmallModal"
	role="dialog"
	tabindex="-1"
	aria-hidden="true"
	style="display: none;"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="claySmallModalLabel">
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					role="button"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Default

500px wide modal window, expands full width of screen at 575px and below.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayDefaultModal"
	data-toggle="modal"
	type="button"
>
	Default Modal
</button>
<div
	aria-labelledby="clayDefaultModalLabel"
	class="fade modal"
	id="clayDefaultModal"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayDefaultModalLabel">
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					role="button"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Large

The large modal is an 800px wide window on displays greater than 992px. It is a 500px wide modal on displays between 576px and 991px. It expands full screen width on displays 575px and below.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayLargeModal"
	data-toggle="modal"
	type="button"
>
	Large Modal
</button>
<div
	aria-labelledby="clayLargeModalLabel"
	class="fade modal"
	id="clayLargeModal"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayLargeModalLabel">
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					role="button"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4><a href="#1">Modal Body</a></h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Full Screen

All Screen Sizes

The full screen modal stretches to fit the browser window, with 45px spacing on every side, and expands to fill the screen on displays 767px and below.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayFullScreenModal"
	data-toggle="modal"
	type="button"
>
	Full Screen Modal
</button>
<div
	aria-labelledby="clayLargeModalLabel"
	class="fade modal"
	id="clayFullScreenModal"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-full-screen">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayLargeModalLabel">
					Add Picture to Documents and Media Library in Liferay Seven
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
				<div>
					<p>
						<a href="#1">Crema coffee</a> a turkish decaffeinated
						espresso dripper cortado lungo con panna. Coffee, roast
						cup blue mountain beans single origin eu shop grounds
						caffeine a robusta. Sweet macchiato spoon, mug foam ut
						est ristretto.
					</p>
					<p>
						Irish coffee, at as cultivar robusta fair trade.
						Variety, caramelization, sweet, steamed, breve sit,
						whipped spoon at in caffeine. So latte, half and half,
						instant café au lait whipped extra at percolator.
					</p>
					<p>
						Skinny extraction, viennese arabica aromatic robust
						kopi-luwak. Carajillo chicory dark espresso qui iced
						sugar. To go, at café au lait chicory, qui, fair trade
						irish, beans seasonal extraction cappuccino kopi-luwak.
					</p>
					<p>
						Crema coffee a turkish decaffeinated espresso dripper
						cortado lungo con panna. Coffee, roast cup blue mountain
						beans single origin eu shop grounds caffeine a robusta.
						Sweet macchiato spoon, mug foam ut est ristretto.
					</p>
					<p>
						Irish coffee, at as cultivar robusta fair trade.
						Variety, caramelization, sweet, steamed, breve sit,
						whipped spoon at in caffeine. So latte, half and half,
						instant café au lait whipped extra at percolator.
					</p>
					<p>
						Skinny extraction, viennese arabica aromatic robust
						kopi-luwak. Carajillo chicory dark espresso qui iced
						sugar. To go, at café au lait chicory, qui, fair trade
						irish, beans seasonal extraction cappuccino kopi-luwak.
					</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Sm Down

Add modal-full-screen-sm-down to any modal-dialog to stretch to fit the browser window at screen widths 767px and below.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayModalFullScreenSmDown"
	data-toggle="modal"
	type="button"
>
	Modal Full Screen Sm Down
</button>
<div
	aria-labelledby="clayModalFullScreenSmDownLabel"
	class="fade modal"
	id="clayModalFullScreenSmDown"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-full-screen-sm-down">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayModalFullScreenSmDownLabel">
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
				<div>
					<p>
						Crema coffee a turkish decaffeinated espresso dripper
						cortado lungo con panna. Coffee, roast cup blue mountain
						beans single origin eu shop grounds caffeine a robusta.
						Sweet macchiato spoon, mug foam ut est ristretto.
					</p>
					<p>
						Crema coffee a turkish decaffeinated espresso dripper
						cortado lungo con panna. Coffee, roast cup blue mountain
						beans single origin eu shop grounds caffeine a robusta.
						Sweet macchiato spoon, mug foam ut est ristretto.
					</p>
					<p>
						Irish coffee, at as cultivar robusta fair trade.
						Variety, caramelization, sweet, steamed, breve sit,
						whipped spoon at in caffeine. So latte, half and half,
						instant café au lait whipped extra at percolator.
					</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Height

Small

Add the class modal-height-sm to the modal or modal-dialog element to fix the height of the modal to 250px.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModalModalHeightSm"
	data-toggle="modal"
	type="button"
>
	Modal Height SM
</button>
<div
	aria-labelledby="claySmallModalModalHeightSmLabel"
	class="fade modal modal-height-sm"
	id="claySmallModalModalHeightSm"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-item-group">
					<div class="modal-item">
						<div class="modal-title-section">
							<div
								class="modal-title"
								id="claySmallModalModalHeightSmLabel"
							>
								Modal Title
							</div>
						</div>
					</div>
				</div>
				<button
					aria-label="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#times" />
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Medium

Add the class modal-height-md to the modal or modal-dialog element to fix the height of the modal to 450px.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModalModalHeightMd"
	data-toggle="modal"
	type="button"
>
	Modal Height MD
</button>
<div
	aria-labelledby="claySmallModalModalHeightMdLabel"
	class="fade modal modal-height-md"
	id="claySmallModalModalHeightMd"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-item-group">
					<div class="modal-item">
						<div class="modal-title-section">
							<div
								class="modal-title"
								id="claySmallModalModalHeightMdLabel"
							>
								Modal Title
							</div>
						</div>
					</div>
				</div>
				<button
					aria-label="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#times" />
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Large

Add the class modal-height-lg to the modal or modal-dialog element to fix the height of the modal to 650px.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModalModalHeightLg"
	data-toggle="modal"
	type="button"
>
	Modal Height LG
</button>
<div
	aria-labelledby="claySmallModalModalHeightLgLabel"
	class="fade modal modal-height-lg"
	id="claySmallModalModalHeightLg"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-item-group">
					<div class="modal-item">
						<div class="modal-title-section">
							<div
								class="modal-title"
								id="claySmallModalModalHeightLgLabel"
							>
								Modal Title
							</div>
						</div>
					</div>
				</div>
				<button
					aria-label="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#times" />
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Extra Large

Add the class modal-height-xl to the modal or modal-dialog element to fix the height of the modal to 800px.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModalModalHeightXl"
	data-toggle="modal"
	type="button"
>
	Modal Height XL
</button>
<div
	aria-labelledby="claySmallModalModalHeightXlLabel"
	class="fade modal modal-height-xl"
	id="claySmallModalModalHeightXl"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-item-group">
					<div class="modal-item">
						<div class="modal-title-section">
							<div
								class="modal-title"
								id="claySmallModalModalHeightXlLabel"
							>
								Modal Title
							</div>
						</div>
					</div>
				</div>
				<button
					aria-label="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#times" />
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Full Screen

Add the class modal-height-full to the modal or modal-dialog element to expand the modal to fit to the height of the browser's window.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModalModalHeightFull"
	data-toggle="modal"
	type="button"
>
	Modal Height Full
</button>
<div
	aria-labelledby="claySmallModalModalHeightFullLabel"
	class="fade modal modal-height-full"
	id="claySmallModalModalHeightFull"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-item-group">
					<div class="modal-item">
						<div class="modal-title-section">
							<div
								class="modal-title"
								id="claySmallModalModalHeightFullLabel"
							>
								Modal Title
							</div>
						</div>
					</div>
				</div>
				<button
					aria-label="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#times" />
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Configurations

Lexicon allows your modal window to have different configurations to suite your needs. Because these needs can vary greatly, there are certain rules your modal must follow.

Header, Body and Footer

A classic modal window is composed of three main parts: header, body, and footer.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayDefaultModal"
	data-toggle="modal"
	type="button"
>
	Default Modal
</button>
<div
	aria-labelledby="clayDefaultModalLabel"
	class="fade modal"
	id="clayDefaultModal"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayDefaultModalLabel">
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					role="button"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Header and Body

When you don't need a footer bar to place your icons, you can just have a header and body element in your modal, as shown below:

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayHeaderBodyModal"
	data-toggle="modal"
	type="button"
>
	Default Modal
</button>
<div
	aria-labelledby="clayDefaultModalLabel"
	class="fade modal"
	id="clayHeaderBodyModal"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayHeaderBodyModalLabel">
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					role="button"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
		</div>
	</div>
</div>

Body and Footer

When you just need to show text and buttons to agree or cancel, you can just have a body and footer element in your modal, as shown below:

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayBodyFooterModal"
	data-toggle="modal"
	type="button"
>
	Default Modal
</button>
<div
	aria-labelledby="clayDefaultModalLabel"
	class="fade modal"
	id="clayBodyFooterModal"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

Code Sample (expand to see it)

<button
	type="button"
	class="btn btn-primary"
	data-toggle="modal"
	data-target="#gridSystemModal"
>
	Launch demo modal
</button>
<div
	id="gridSystemModal"
	class="modal fade"
	tabindex="-1"
	role="dialog"
	aria-labelledby="gridModalLabel"
	style="display: none;"
	aria-hidden="true"
>
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
				<button
					type="button"
					class="close"
					data-dismiss="modal"
					aria-label="Close"
				>
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="container-fluid bd-example-row">
					<div class="row">
						<div class="bg-info col-md-4 text-white">.col-md-4</div>
						<div class="bg-info col-md-4 ml-auto text-white">
							.col-md-4 .ml-auto
						</div>
					</div>
					<div class="row">
						<div class="bg-warning col-md-3 ml-auto text-white">
							.col-md-3 .ml-auto
						</div>
						<div class="bg-warning col-md-2 ml-auto text-white">
							.col-md-2 .ml-auto
						</div>
					</div>
					<div class="row">
						<div class="bg-success col-md-6 ml-auto text-white">
							.col-md-6 .ml-auto
						</div>
					</div>
					<div class="row">
						<div class="bg-danger col-sm-9 text-white">
							Level 1: .col-sm-9
							<div class="row">
								<div
									class="bg-success col-8 col-sm-6 text-white"
								>
									Level 2: .col-8 .col-sm-6
								</div>
								<div
									class="bg-success col-4 col-sm-6 text-white"
								>
									Level 2: .col-4 .col-sm-6
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button
					type="button"
					class="btn btn-secondary"
					data-dismiss="modal"
				>
					Close
				</button>
				<button type="button" class="btn btn-primary">
					Save changes
				</button>
			</div>
		</div>
	</div>
</div>

Iframe

You can add an Iframe to the modal body.

Add the modal-body-iframe class to a modal-body element when you want the iframe to be the same width and height as the modal-body element.

In mobile safari (iOS 8.3), any content inside an iframe that triggers a browser reflow will cause the iframe to scroll to the top.

Code Sample (expand to see it)

<div class="sheet-example">
	<button
		class="btn btn-primary"
		data-target="#clayFullScreenModalIframe"
		data-toggle="modal"
		type="button"
	>
		Full Screen Modal Iframe
	</button>
	<div
		aria-labelledby="clayFullScreenModalIframeLabel"
		class="fade modal"
		id="clayFullScreenModalIframe"
		role="dialog"
		tabindex="-1"
		aria-hidden="true"
		style="display: none;"
	>
		<div class="modal-dialog modal-full-screen modal-full-screen-sm-down">
			<div class="modal-content">
				<div class="modal-header">
					<div
						class="modal-title"
						id="clayFullScreenModalIframeLabel"
					>
						Add Picture to Documents and Media Library in Liferay
						Seven
					</div>
					<button
						aria-labelledby="Close"
						class="close"
						data-dismiss="modal"
						type="button"
					>
						<svg
							class="lexicon-icon lexicon-icon-times"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#times"></use>
						</svg>
					</button>
				</div>
				<div class="modal-body modal-body-iframe">
					<iframe src="/"></iframe>
				</div>
				<div class="modal-footer">
					<div class="modal-item-last">
						<div class="btn-group">
							<div class="btn-group-item">
								<button
									class="btn btn-secondary"
									data-dismiss="modal"
									type="button"
								>
									Close
								</button>
							</div>
							<div class="btn-group-item">
								<button class="btn btn-primary" type="button">
									Primary
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Status Messages

Modal headers can be configured to use modals as status messages. This emphasizes blocking actions that the user must read and pay careful attention to.

Add one of the following helper classes to the modal-dialog element to style is with corresponding state: modal-danger, modal-info, modal-success, or modal-warning.

Success

Code Sample (expand to see it)

<button
	class="btn btn-success"
	data-target="#clayModalSuccess"
	data-toggle="modal"
	type="button"
>
	Modal Success
</button>
<div
	aria-labelledby="clayModalSuccessLabel"
	class="fade modal"
	id="clayModalSuccess"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-success modal-dialog modal-full-screen-sm-down">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayModalSuccessLabel">
					<span class="modal-title-indicator">
						<svg
							class="lexicon-icon lexicon-icon-check-circle-full"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#check-circle-full"
							></use>
						</svg>
					</span>
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-first">
					<button class="btn btn-primary" type="button">
						Primary
					</button>
				</div>
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Info

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#clayModalInfo"
	data-toggle="modal"
	type="button"
>
	Modal Info
</button>
<div
	aria-labelledby="clayModalInfoLabel"
	class="fade modal"
	id="clayModalInfo"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-info modal-dialog modal-full-screen-sm-down">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayModalInfoLabel">
					<span class="modal-title-indicator">
						<svg
							class="lexicon-icon lexicon-icon-info-circle"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#info-circle"
							></use>
						</svg>
					</span>
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Warning

Code Sample (expand to see it)

<button
	class="btn btn-warning"
	data-target="#clayModalWarning"
	data-toggle="modal"
	type="button"
>
	Modal Warning
</button>
<div
	aria-labelledby="clayModalWarningLabel"
	class="fade modal"
	id="clayModalWarning"
	role="dialog"
	tabindex="-1"
>
	<div class="modal-warning modal-dialog modal-full-screen-sm-down">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayModalWarningLabel">
					<span class="modal-title-indicator">
						<svg
							class="lexicon-icon lexicon-icon-warning-full"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#warning-full"
							></use>
						</svg>
					</span>
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Danger

Code Sample (expand to see it)

<button
	class="btn btn-danger"
	data-target="#clayModalDanger"
	data-toggle="modal"
	type="button"
>
	Modal Danger
</button>
<div
	aria-labelledby="clayModalDangerLabel"
	class="fade modal"
	id="clayModalDanger"
	role="dialog"
	tabindex="-1"
	style="display: none;"
	aria-hidden="true"
>
	<div class="modal-danger modal-dialog modal-full-screen-sm-down">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="clayModalDangerLabel">
					<span class="modal-title-indicator">
						<svg
							class="lexicon-icon lexicon-icon-exclamation-full"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#exclamation-full"
							></use>
						</svg>
					</span>
					Modal Title
				</div>
				<button
					aria-labelledby="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-first">
					<button class="btn btn-primary" type="button">
						Primary
					</button>
				</div>
				<div class="modal-item">Some other content</div>
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Helpers

Use classes modal-item-first, modal-item, and modal-item-last inside modal-footer to align content left, middle, and right.

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Code Sample (expand to see it)

<button
	type="button"
	class="btn btn-primary"
	data-toggle="modal"
	data-target="#exampleModalCenter"
>
	Launch demo modal
</button>
<div
	id="exampleModalCenter"
	class="modal fade"
	tabindex="-1"
	role="dialog"
	aria-labelledby="exampleModalCenterTitle"
	aria-hidden="true"
	style="display: none;"
>
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalCenterTitle">
					Modal title
				</h5>
				<button
					type="button"
					class="close"
					data-dismiss="modal"
					aria-label="Close"
				>
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<p>
					Cras mattis consectetur purus sit amet fermentum. Cras justo
					odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
					risus, porta ac consectetur ac, vestibulum at eros.
				</p>
			</div>
			<div class="modal-footer">
				<button
					type="button"
					class="btn btn-secondary"
					data-dismiss="modal"
				>
					Close
				</button>
				<button type="button" class="btn btn-primary">
					Save changes
				</button>
			</div>
		</div>
	</div>
</div>

Remove animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Inline Scroller

inline-scroller is a helper class that sizes modal-body to a fixed height and scrolls any overflowing content. Add it to modal-body when you want modal-body to be a fixed height. It defaults to height 125px.

Code Sample (expand to see it)

<button
	class="btn btn-primary"
	data-target="#claySmallModalInlineScroller"
	data-toggle="modal"
	type="button"
>
	Small Modal Inline Scroller
</button>
<div
	aria-labelledby="claySmallModalInlineScrollerLabel"
	class="fade modal"
	id="claySmallModalInlineScroller"
	role="dialog"
	tabindex="-1"
	style="display: none;"
	aria-hidden="true"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="claySmallModalInlineScrollerLabel">
					Modal Title
				</div>
				<button
					aria-label="Close"
					class="close"
					data-dismiss="modal"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body inline-scroller">
				<h4>Modal Body</h4>
				<div>
					<p>
						<a href="#1">Crema coffee</a> a turkish decaffeinated
						espresso dripper cortado lungo con panna. Coffee, roast
						cup blue mountain beans single origin eu shop grounds
						caffeine a robusta. Sweet macchiato spoon, mug foam ut
						est ristretto.
					</p>
					<p>
						Irish coffee, at as cultivar robusta fair trade.
						Variety, caramelization, sweet, steamed, breve sit,
						whipped spoon at in caffeine. So latte, half and half,
						instant café au lait whipped extra at percolator.
					</p>
					<p>
						Skinny extraction, viennese arabica aromatic robust
						kopi-luwak. Carajillo chicory dark espresso qui iced
						sugar. To go, at café au lait chicory, qui, fair trade
						irish, beans seasonal extraction cappuccino kopi-luwak.
					</p>
					<p>
						Crema coffee a turkish decaffeinated espresso dripper
						cortado lungo con panna. Coffee, roast cup blue mountain
						beans single origin eu shop grounds caffeine a robusta.
						Sweet macchiato spoon, mug foam ut est ristretto.
					</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

useModal hook

Usage

Header

Provider

API

ClayModal

ClayModal.Body

ClayModal.Footer

ClayModal.Header

ClayModal.Item

ClayModal.ItemGroup

ClayModal.Subtitle

ClayModal.SubtitleSection

ClayModal.Title

ClayModal.TitleSection

ClayModal.TitleIndicator

Sizes

Small

Default

Large

Full Screen

All Screen Sizes

Sm Down

Height

Small

Medium

Large

Extra Large

Full Screen

Configurations

Header, Body and Footer

Header and Body

Body and Footer

Grid

Iframe

Status Messages

Success

Info

Warning

Danger

Helpers

Footer alignment

Vertically centered

Remove animation

Inline Scroller