InfoBar

The InfoBar control is for displaying app-wide status messages to users that are highly visible yet non-intrusive. There are built-in severity levels to easily indicate the type of message shown, as well as the option to include your own call to action or hyperlink button. Since the InfoBar is inline with other UI content, it can remain visible or be dismissed by the user.

Attention

This is an attention message.

Warning

This is a warning message.

Success

This is a success message.

Usage

<script lang="ts">
  import { InfoBar } from 'fluentui-svelte';
</script>

<InfoBar status="information" title="Information">
  <p>This is an informational message.</p>
</InfoBar>

Status

The status prop determines the visual style and meaning of the InfoBar.

View Code

<InfoBar status="information" title="Information">
  <p>This is an informational message.</p>
</InfoBar>
<InfoBar status="attention" title="Attention">
  <p>This is an attention message.</p>
</InfoBar>
<InfoBar status="warning" title="Warning">
  <p>This is a warning message.</p>
</InfoBar>
<InfoBar status="critical" title="Critical">
  <p>This is a critical message.</p>
</InfoBar>
<InfoBar status="success" title="Success">
  <p>This is a success message.</p>
</InfoBar>

Information

This is an informational message.

Attention

This is an attention message.

Warning

This is a warning message.

Critical

This is a critical message.

Success

This is a success message.

Style

The style prop determines the layout of the InfoBar.

View Code

<InfoBar status="information" style="inline" title="Inline Style">
  <p>This is an inline styled InfoBar.</p>
</InfoBar>
<InfoBar status="information" style="multiline" title="Multiline Style">
  <p>This is a multiline styled InfoBar.</p>
</InfoBar>

Inline Style

This is an inline styled InfoBar.

Multiline Style

This is a multiline styled InfoBar.

Hide Close Button

The hideCloseButton prop allows you to hide the close button in the InfoBar.

View Code

<InfoBar status="information" title="Without Close Button" hideCloseButton>
  <p>This InfoBar does not have a close button.</p>
</InfoBar>
<InfoBar status="information" title="With Close Button">
  <p>This InfoBar has a close button.</p>
</InfoBar>

Without Close Button

This InfoBar does not have a close button.

With Close Button

This InfoBar has a close button.

Component Props

Name	Type	Default	Description
`status`	`'information'` \| `'attention'` \| `'warning'` \| `'critical'` \| `'success'`	`'information'`	The severity of the message, which picks the icon and the colors.
`style`	`'inline'` \| `'multiline'`	`'inline'`	Lays the message out on a single line, or stacked below the title.
`title`	`string`		The title of the InfoBar.
`icon`	`Snippet` \| `Component`		Custom icon, rendered instead of the one the `status` would pick on its own.
`iconSize`	`number`	`20`	The size of the icon in pixels.
`hideCloseButton`	`boolean`		Removes the button that dismisses the InfoBar.
`children`	`Snippet`		The message of the InfoBar.
Element Attributes (`div`)