# Snackbar Component

Snackbars provide brief updates about app processes at the bottom of the screen.

In addition to direct component usage, mdui also offers a [`mdui.snackbar`](/en/docs/2/functions/snackbar) function for a simpler way to use the Snackbar component.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/snackbar.js';
```

Import the TypeScript type:

```ts
import type { Snackbar } from 'mdui/components/snackbar.js';
```

Example:

```html
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

## Examples {#examples}

### Placement {#example-placement}

You can set the snackbar's position using the `placement` attribute.

```html
<div class="example-placement">
  <div class="row">
    <mdui-snackbar placement="top-start">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">top-start</mdui-button>

    <mdui-snackbar placement="top">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">top</mdui-button>

    <mdui-snackbar placement="top-end">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">top-end</mdui-button>
  </div>
  <div class="row">
    <mdui-snackbar placement="bottom-start">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">bottom-start</mdui-button>

    <mdui-snackbar placement="bottom">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">bottom</mdui-button>

    <mdui-snackbar placement="bottom-end">Photo archived</mdui-snackbar>
    <mdui-button variant="outlined">bottom-end</mdui-button>
  </div>
</div>

<script>
  const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");

  snackbars.forEach((snackbar) => {
    const button = snackbar.nextElementSibling;
    button.addEventListener("click", () => snackbar.open = true);
  });
</script>

<style>
.example-placement mdui-button {
  margin: 0.25rem;
  width: 7.5rem;
}
</style>
```

### Action Button {#example-action}

The `action` attribute adds an action button on the right side and specifies its text. The `action-click` event is triggered when the action button is clicked. The `action-loading` attribute displays a loading state on the action button.

```html
<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action");
  const openButton = snackbar.nextElementSibling;

  snackbar.addEventListener("action-click", () => {
    snackbar.actionLoading = true;
    setTimeout(() => snackbar.actionLoading = false, 2000);
  });

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

The `action` slot can also be used to add elements on the right side.

```html
<mdui-snackbar class="example-action-slot">
  Photo archived
  <mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

### Closeable {#example-closeable}

The `closeable` attribute adds a close button on the right. Clicking the button closes the snackbar and triggers the `close` event.

```html
<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-closeable");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

The `close-button` slot specifies the close button's content.

```html
<mdui-snackbar closeable class="example-close-button-slot">
  Photo archived
  <mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-button-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

The `close-icon` attribute sets the Material Icon in the default close button. The `close-icon` slot sets the icon element in the default close button.

```html
<mdui-snackbar
  closeable
  close-icon="delete"
  class="example-close-icon"
>Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-icon");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

### Text Lines {#example-message-line}

The `message-line` attribute limits the number of lines in the message text, with a maximum of `2` lines.

```html
<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-line");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

### Auto Close Delay {#example-auto-close-delay}

The `auto-close-delay` attribute sets the delay for automatic closure, in milliseconds. The default is `5000` milliseconds.

```html
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-delay");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

### Closing on Outside Click {#example-close-on-outside-click}

The `close-on-outside-click` attribute closes the snackbar when clicking outside of its area.

```html
<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-outside");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

## mdui-snackbar API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>open</td>
    <td>open</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Opens the Snackbar.</p>
</td>
  </tr>
  <tr>
    <td>placement</td>
    <td>placement</td>
    <td>true</td>
    <td>&#39;top&#39; | &#39;top-start&#39; | &#39;top-end&#39; | &#39;bottom&#39; | &#39;bottom-start&#39; | &#39;bottom-end&#39;</td>
    <td>'bottom'</td>
    <td><p>Snackbar placement. Default is <code>bottom</code>. Possible values:</p>
<ul>
<li><code>top</code>: Top center.</li>
<li><code>top-start</code>: Top left.</li>
<li><code>top-end</code>: Top right.</li>
<li><code>bottom</code>: Bottom center.</li>
<li><code>bottom-start</code>: Bottom left.</li>
<li><code>bottom-end</code>: Bottom right.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>action</td>
    <td>action</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Text for the action button. Alternatively, use <code>slot=&quot;action&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>action-loading</td>
    <td>actionLoading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Whether the action button is in a loading state.</p>
</td>
  </tr>
  <tr>
    <td>closeable</td>
    <td>closeable</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Shows a close button on the right.</p>
</td>
  </tr>
  <tr>
    <td>close-icon</td>
    <td>closeIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Material Icons name for the close button. Alternatively, use <code>slot=&quot;close-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>message-line</td>
    <td>messageLine</td>
    <td>true</td>
    <td>1 | 2</td>
    <td></td>
    <td><p>Maximum lines for message text. Default is unlimited. Possible values:</p>
<ul>
<li><code>1</code>: Single line.</li>
<li><code>2</code>: Two lines.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>auto-close-delay</td>
    <td>autoCloseDelay</td>
    <td>true</td>
    <td>number</td>
    <td>5000</td>
    <td><p>Automatically closes the Snackbar after the given delay (in milliseconds). Set to <code>0</code> to disable auto-close. Default is <code>5000</code>.</p>
</td>
  </tr>
  <tr>
    <td>close-on-outside-click</td>
    <td>closeOnOutsideClick</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Closes the Snackbar when the user clicks or touches outside it.</p>
</td>
  </tr>
</tbody>
</table>

### Events

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>open</td>
    <td><p>Emitted when the snackbar starts to open. Can be prevented with <code>event.preventDefault()</code>.</p>
</td>
  </tr>
  <tr>
    <td>opened</td>
    <td><p>Emitted after the snackbar opens and animations complete.</p>
</td>
  </tr>
  <tr>
    <td>close</td>
    <td><p>Emitted when the snackbar starts to close. Can be prevented with <code>event.preventDefault()</code>.</p>
</td>
  </tr>
  <tr>
    <td>closed</td>
    <td><p>Emitted after the snackbar closes and animations complete.</p>
</td>
  </tr>
  <tr>
    <td>action-click</td>
    <td><p>Emitted when the action button is clicked.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>Snackbar message.</p>
</td>
  </tr>
  <tr>
    <td>action</td>
    <td><p>Right action button.</p>
</td>
  </tr>
  <tr>
    <td>close-button</td>
    <td><p>Right-side close button. Shown if <code>closeable</code> is set.</p>
</td>
  </tr>
  <tr>
    <td>close-icon</td>
    <td><p>Icon in the right close button.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>message</td>
    <td><p>Message text.</p>
</td>
  </tr>
  <tr>
    <td>action</td>
    <td><p>Action button.</p>
</td>
  </tr>
  <tr>
    <td>close-button</td>
    <td><p>Close button.</p>
</td>
  </tr>
  <tr>
    <td>close-icon</td>
    <td><p>Icon in the close button.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Properties

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>The corner radius of the component. You can use a specific pixel value, but it is recommended to reference <a href="/en/docs/2/styles/design-tokens#shape-corner">design tokens</a>.</p>
</td>
  </tr>
  <tr>
    <td>--z-index</td>
    <td><p>The CSS <code>z-index</code> value of the component.</p>
</td>
  </tr>
</tbody>
</table>