2.11.0
Top Hats display a system-level message above a page’s masthead. There are three types: error, warning, or informational.
That combination of options is invalid.
Name
|
Required
|
Description
|
---|---|---|
Message |
Yes |
Top hat content. |
Type |
Yes |
Affects the color and icon associated with the top hat. Choose from error, warning, or informational. |
Dismiss Action |
No |
Enables the user to remove the top hat from view. |
Use for system-level errors that prohibit work, such as a critical browser incompatibility or an internet-connectivity issue.
<diV class="mds-top-hat mds-top-hat--error" role="alert">
<div class="mds-top-hat__body">
<svg class="mds-icon mds-top-hat__icon" aria-hidden="true">
<use xlink:href="/icons/mds.svg#alert">
</use>
</svg>
<span class="mds-top-hat__message">No internet connection. Please check your local network.</span>
</div>
</diV>
<mds-top-hat status="error" dismissible="false" role="alert">No internet connection. Please check your local network.</mds-top-hat>
Use to provide a system-level warning, such as a permissions or data issue, planned outages, or a non-critical browser incompatibility.
<diV class="mds-top-hat mds-top-hat--warning mds-top-hat--dismissible" role="alert">
<div class="mds-top-hat__body">
<svg class="mds-icon mds-top-hat__icon" aria-hidden="true">
<use xlink:href="/icons/mds.svg#alert">
</use>
</svg>
<span class="mds-top-hat__message">Service will be unavailable on Sunday, December 10th from 5–7 PM CST for scheduled maintenance. <a href='#'>More information</a>
</span>
</div>
<button class="mds-button mds-button--small mds-button--icon-only mds-top-hat__dismiss-button" type="button">
<svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
<use xlink:href="/icons/mds.svg#remove--s">
</use>
</svg>
</button>
</diV>
<mds-top-hat status="warning" role="alertdialog">Service will be unavailable on Sunday, December 10th from 5–7 PM CST for scheduled maintenance. <a href='#'>More information</a>
</mds-top-hat>
Use to provide system-level information, such as an announcement about a new feature.
<diV class="mds-top-hat mds-top-hat--dismissible" role="alert">
<div class="mds-top-hat__body">
<svg class="mds-icon mds-top-hat__icon" aria-hidden="true">
<use xlink:href="/icons/mds.svg#info-circle">
</use>
</svg>
<span class="mds-top-hat__message">Welcome to the new Morningstar.com. <a href='#'>See What’s New</a>
</span>
</div>
<button class="mds-button mds-button--small mds-button--icon-only mds-top-hat__dismiss-button" type="button">
<svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
<use xlink:href="/icons/mds.svg#remove--s">
</use>
</svg>
</button>
</diV>
<mds-top-hat role="alertdialog">Welcome to the new Morningstar.com. <a href='#'>See What’s New</a>
</mds-top-hat>
Sizing affects text size, icon size, and internal padding. Use small top hats when vertical space is limited or information density is desired. The default size is small and you can use modifier classes or props to make the top hat smaller.
<diV class="mds-top-hat mds-top-hat--small mds-top-hat--dismissible" role="alert">
<div class="mds-top-hat__body">
<svg class="mds-icon mds-top-hat__icon" aria-hidden="true">
<use xlink:href="/icons/mds.svg#info-circle--s">
</use>
</svg>
<span class="mds-top-hat__message">Top hat message, including <a href='#'>a link</a>.</span>
</div>
<button class="mds-button mds-button--small mds-button--icon-only mds-top-hat__dismiss-button" type="button">
<svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
<use xlink:href="/icons/mds.svg#remove--s">
</use>
</svg>
</button>
</diV>
<mds-top-hat size="small" role="alertdialog">Top hat message, including <a href='#'>a link</a>.</mds-top-hat>
500px
.remove--s
.
Class
|
Applies to
|
Outcome
|
---|---|---|
|
|
Reduces text size, icon size, and internal padding. |
|
|
Adds padding to the right side of the body of the top hat to accommodate the close icon. |
|
|
Dismisses the top hat by animating fade-out and slide-up effects. |
|
|
Applies the yellow color to the component’s background, bottom border, and icon. |
|
|
Applies the red color to the component’s background, bottom border, and icon. |
Prop
|
Type
|
Validation
|
Default
|
Description
|
---|---|---|---|---|
|
String |
— |
— |
A space-separated list of class names that will be appended to the default |
|
Boolean |
— |
|
When true, adds an icon-only dismiss button that allows the top hat to be dismissed. |
|
String |
— |
— |
The |
|
Boolean |
Only valid when |
|
When true, removes the top hat from the DOM after the dismiss animation completes. If false, top hat is simply hidden when dismissed, not removed. |
|
String |
— |
— |
Sets the |
|
String |
Enum: |
|
Alters the size of the top hat. |
|
String |
Enum: |
|
Sets the status of the top hat. |
|
String |
Required |
— |
The text that appears in the top hat. |
Any text or markup passed in between the <mds-top-hat></mds-top-hat>
tags will be used as the top hat’s text. This can be overridden with the text
prop.
Method Name
|
Description
|
---|---|
|
The same method called internally when the icon-only dismiss button is clicked. Useful for programmatically calling |
Event Name
|
Description
|
---|---|
|
If |
|
If |
Setting the text, size, and role:
<!-- Using Props -->
<mds-top-hat text="This is a sample top hat message." size="small" role="alertdialog"></mds-top-hat>
<!-- Using Slots -->
<mds-top-hat size="small" role="alertdialog"> This is a sample top hat message. </mds-top-hat>
Setting the text, variation, and role and suppressing the dismiss action:
<!-- Using Props -->
<mds-top-hat text="You don’t have an internet connection." status="error" dismissible="false" role="alert"></mds-top-hat>
<!-- Using Slots -->
<mds-top-hat status="error" dismissible="false" role="alert"> You don’t have an internet connection. </mds-top-hat>
role="alert"
for top hats that do not contain an interactive element.role="alertdialog"
when a top hat includes an interactive element, like a Link or dismiss button.focus
to the most relevant interactive element in the top hat.