What severity levels does InfoBar support?

Set the status prop to 'information', 'attention', 'warning', 'critical', or 'success' to change the visual style and meaning.

How do I make an InfoBar non-dismissible?

Set the hideCloseButton prop to hide the close button so the message cannot be dismissed by the user.

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>

Component API

A brief explanation of the props that really need explaining. You can see the rest of the props here.

Status

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

View Code

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

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

Without Close Button

This InfoBar does not have a close button.

With Close Button

This InfoBar has a close button.

Component Props

Name	Type	Description
`status`	`string`	The status of the InfoBar. Possible values: 'information', 'attention', 'warning', 'critical', 'success'.
`style`	`string`	The style of the InfoBar. Possible values: 'inline', 'multiline'.
`title`	`string`	The title of the InfoBar.
`icon`	`Snippet` \| `Component`	The icon to display in the InfoBar.
`iconSize`	`number`	The size of the icon in pixels. Default: 20.
`hideCloseButton`	`boolean`	Whether to hide the close button. Default: false.
`children`	`Snippet`	The child elements to render inside the InfoBar.