InfoBar

Edit This Page

The InfoBar control is for displaying app-wide status messages to users that are highly visible yet non-intrusive. There are built-in security levels to easily indicate the type of message shown as well as the option to include your own call to action or hyperlink button.

import { InfoBar } from "fluent-svelte";

Usage

Text Contents - title and message

There are two areas of text that can be customized - the title and the message. Both are optional, but at least one is recommended.

  • You can specify a title for the InfoBar using title property.
  • You can set the InfoBar’s message using the message property.
<InfoBar title="Title" message="Message" />

If you need to include HTML content into the message, you can also just use the default slot.

<InfoBar>
	Visit <a href="https://fluent-svelte.vercel.app">Fluent Svelte</a> for some neat fluent design components!
</InfoBar>

Severity

InfoBars can take in a severity prop, which represent the type of information you wish to convey to the user. The default severity is information.

Severity Badge Usage Preview
information Non-critical messages containing general information.
attention Messages that are non-critical, but still important to the user.
success Messages that convey an action that has postively been completed.
caution Messages that serve to warn the user of a potentially dangerous action.
critical Higher-severity messages that convey a dangerous or failed action.

Action Buttons

An action button can be passed in using the action slot. It’s recommended that you use the Button component for this, but any HTML element is valid.

<InfoBar title="Title" message="Message">
	<Button slot="action">Action</Button>
</InfoBar>

Controlling Visibility

InfoBars by default are open. This means that they are rendered into the DOM. When the close button is pressed, they will be removed from the DOM and the open property will be set back to false.

<script>
	import { InfoBar, Button } from "fluent-svelte";

	let open = false;
</script>

<Button on:click={() => (open = !open)}>
	{open ? "Close" : "Open"}
</Button>

<InfoBar title="Title" message="Message" bind:open />

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
open boolean true Determines whether the bar is open (rendered).
closable boolean true Determines whether the close button is used or not.
severity string "information" Indicates the severity color of the bar.
title string "" Title of the Infobar.
message string "" Description text shown next to or below the title.
element null | HTMLDivElement null Obtains a bound DOM reference to the bar's container element.
titleElement null | HTMLHeadingElement null Obtains a bound DOM reference to the bar's title element.
messageElement null | HTMLParagraphElement null Obtains a bound DOM reference to the bar's message (paragraph) element.
actionElement null | HTMLDivElement null Obtains a bound DOM reference to the bar's action wrapper element.
closeButtonElement null | HTMLButtonElement null Obtains a bound DOM reference to the bar's close button element.

Slots

NameSlot PropsFallback
Unnamed (Default) {} Empty
action {} Empty
icon {} <InfoBadge {severity} />

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

NameDetail
open None
close None