When considering the use of a banner, it's best to evaluate the level of the message first. Content within banners must be important or require action taken by the customer.
<tk-banner>
Information: This banner is used to provide general information.
</tk-banner>
<tk-banner type="warning">
Warning: This banner is used to communicate an impending, non-blocking issue.
</tk-banner>
<tk-banner type="error">
Error: This banner is used to communicate a blocking change that needs to be remedied before a user can proceed.
</tk-banner>
<tk-banner type="success">
Success: This banner is used to communicate a positive or confirming action.
</tk-banner>Banners communicate varying levels of content such as information, warnings, errors, and success.
1 Holly and Phoenix feather wand. Buy it now.
1 Yew and Phoenix feather wand. Buy it now.
<tk-banner>
<h2 class="t-medium mb-1x">Olivander's Wand Shop</h2>
<p class="mb-0x">1 Holly and Phoenix feather wand. <a href="#">Buy it now.</a></p>
<p class="mb-0x">1 Yew and Phoenix feather wand. <a href="#">Buy it now.</a></p>
</tk-banner><button class="btn btn--link"
onClick="toggleBanner(event.target)"
type="button">
Toggle Example
</button>
<tk-banner type="error" offline is-hidden>
The restricted section of the library is forbidden to all students at Hogwarts.
</tk-banner>Offline: This banner extends the full width of the browser to draw attenton. This banner is used for network failure.
<div style="height: 400px">
<tk-banner sticky>
Gillyweed: A nifty water plant that allows the person who eats it to breathe underwater.
</tk-banner>
</div>Sticky: This banner is used to provide context that may extend the viewable window.
<tk-banner>
Pre-order a copy of Gilderoy Lockhart's most celebrated book, <a href="#">Magical Me</a>.
</tk-banner>Link: Banners with links provide additional context to the notification. This ensures banners remain concise. Links should navigate to other pages.
<tk-banner>
Need stocking stuffers? Check out Gilderoy Lockhart's thrilling adventure, <button type="button">Year with the Yeti</button>.
</tk-banner>Button Link: Banners with button links connect specifc actions to banners. Commonly this pattern is used to launch modals from banners.
<tk-banner id="banner" closeable onClose="showToggler(event.target)">
This is the <strong>default</strong> banner
with a <strong>close</strong> button.
</tk-banner>
<button class="btn btn--link hidden"
onClick="showBanner(event.target)"
type="button">
Show banner again?
</button>
<script>
const banner = document.getElementById('banner'); // Safari
banner.addEventListener('close', (e) => showToggler(e.target)); // Safari
const showBanner = (element) => {
const banner = element.previousElementSibling;
banner.removeAttribute('is-hidden');
element.classList.add('hidden');
};
const showToggler = (element) => {
const button = element.nextElementSibling;
button.classList.remove('hidden');
};
</script>Closeable: When possible add the ability to close a banner to allow the customer to be in control of their workplace. In the example above, the banner is listening for the close event to be emitted. Then it calls the showToggler method.
GlobalEventHandlers.onclose, you’ll need to add the event listener if using the component in plain HTML. This is not necessary in Angular since (close) can just be used as an output.
| Property | Default | Description |
|---|---|---|
closeable |
false |
Adds a close button to hide the banner. |
isHidden |
false |
Sets the visibility of the banner. Useful if you want to hide the banner until an action is completed. |
sticky |
false |
Pins the banner to the top of its container. |
type |
info |
Changes the appearance of the banner to convey severity of information. Other types are error, success, or warning. |
| Name | Description |
|---|---|
close |
Emits whenever the banner’s close button is clicked. Useful if you don’t want the banner to reappear on refresh. |