# InfoBar

> Part of fluentui-svelte. Read the global guide first (setup, rules and pitfalls): https://fluentui-svelte.dev/docs/llms.md, also shipped as node_modules/fluentui-svelte/skills/fluentui-svelte/SKILL.md

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.

## Usage

```svelte
<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 in the Component Props table below.

## Examples

### Status

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

```svelte
<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>
```

### Style

The style prop determines the layout of the InfoBar.

```svelte
<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>
```

### Hide Close Button

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

```svelte
<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>
```

## Component Props

<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
<!-- props:InfoBarProps -->

| Name                       | Type                                                                                           | Default         | Description                                                                               |
| -------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------- |
| `status`                   | `'information'` &#124; `'attention'` &#124; `'warning'` &#124; `'critical'` &#124; `'success'` | `'information'` | The severity of the message, which picks the icon and the colors.                         |
| `style`                    | `'inline'` &#124; `'multiline'`                                                                | `'inline'`      | Lays the message out on a single line, or stacked below the title.                        |
| `title`                    | `string`                                                                                       |                 | The title of the InfoBar.                                                                 |
| `headingLevel`             | `1` &#124; `2` &#124; `3` &#124; `4` &#124; `5` &#124; `6`                                     | `3`             | The level of the heading that holds the title, to fit the headings of the page around it. |
| `icon`                     | `Snippet` &#124; `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`) |                                                                                                |                 |                                                                                           |

<!-- /props:InfoBarProps -->