import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import LineLengths from "examples/snackbar/line-lengths.tsx";
import InfiniteDuration from "examples/snackbar/infinite-duration.tsx";
import Placement from "examples/snackbar/placement.tsx";
import ActionButtonUsage from "examples/snackbar/action-button-usage.tsx";

import * as SnackbarExports from "baseui/snackbar";

export default Layout;

# Snackbar

A Snackbar is a message used to give users feedback after taking an action. They are ephemeral
and time out after a few seconds.

Use Snackbars when you need a quick, lightweight way of providing feedback following an action
they've taken. They're great for confirming an event happened or the user did something
successfully. They allow a user to continue their tasks with minimal interruption. Think of
them like a real life subtle nod of the head to acknowledge an action taken.

Snackbars can be queued up easily by using the `useSnackbar` hook. Calling the `enqueue` function
will display the snackbar and subsequent calls will the snackbar in line to display once the earlier
one is finished displaying.

## Examples

A snackbar will render at most three lines before truncating the text. Depending on the line
count, it's recommended to change the display duration so that users can fully read the text
before exiting. By default, it will choose the shortest duration.

<Example title="Line lengths" path="snackbar/line-lengths.tsx">
  <LineLengths />
</Example>

In some circumstances, you will want to not auto-hide the snackbar and wait until a task
completes. The example below shows `DURATION.inifinite` usage, how to manually dequeue a
snackbar, as well as demonstrates the `progress` flag that will render a spinner element.

<Example title="Infinite duration" path="snackbar/infinite-duration.tsx">
  <InfiniteDuration />
</Example>

Snackbar elements can be positioned in various places on the page, but defaults to the
top-center. Snackbars should be placed in a consistent location throughout the application.
To facilitate consistent placement, this is only configurable from the `SnackbarProvider`.

<Example title="Placement" path="snackbar/placement.tsx">
  <Placement />
</Example>

Snackbars can also offer the ability to perform a single action. Appropriate use case fort
his button include: canceling, undoing, retrying, or linking to related content. Avoid
using the button to dismiss the snackbar since it will time out on its own.

<Example title="Action button usage" path="snackbar/action-button-usage.tsx">
  <ActionButtonUsage />
</Example>

<Exports
  component={SnackbarExports}
  title="Snackbar exports"
  path="baseui/snackbar"
/>