---
title: Snacks
description: "`Snacks` is a component for controlling notifications used in forms and other similar situations."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/snacks
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-snacks--basic
---

# Snacks

`Snacks` is a component for controlling notifications used in forms and other similar situations.

```tsx
const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          snack({
            description: "こいつ、動くぞ！",
            title: "アムロ・レイ",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

## Usage

```tsx
import { useSnacks, Snacks } from "@yamada-ui/react"
```

```tsx
import { useSnacks, Snacks } from "@/components/ui"
```

```tsx
import { useSnacks, Snacks } from "@workspaces/ui"
```

```tsx
<Snacks />
```

### Change Variant

```tsx
const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <For each={["plain", "solid", "subtle", "surface", "island"]}>
        {(variant) => (
          <Button
            key={variant}
            onClick={() => {
              snack({
                variant,
                description: "美しいものが、嫌いな人がいるのかしら？",
                title: "ララァ・スン",
                withIcon: variant !== "island" ? true : false,
              })
            }}
          >
            Add "{toTitleCase(variant)}" Snack
          </Button>
        )}
      </For>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Change Color Scheme

```tsx
const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <For each={["success", "warning"]}>
        {(colorScheme) => (
          <Button
            key={colorScheme}
            onClick={() => {
              snack({
                colorScheme,
                description:
                  "見せて貰おうか。連邦軍のモビルスーツの性能とやらを！",
                title: "シャア・アズナブル",
              })
            }}
          >
            Add "{toTitleCase(colorScheme)}" Snack
          </Button>
        )}
      </For>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Change Status

To change status, set the `status` prop.

```tsx
const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <For each={["info", "success", "warning", "error"]}>
        {(status) => (
          <Button
            key={status}
            onClick={() => {
              snack({
                description: "アムロ、行きまーす！",
                status,
                title: "アムロ・レイ",
              })
            }}
          >
            Add "{toTitleCase(status)}" Snack
          </Button>
        )}
      </For>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Change Loading Scheme

To change loading scheme, set the `loadingScheme` prop.

```tsx
const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <For each={["oval", "grid", "puff", "dots"]}>
        {(loadingScheme) => (
          <Button
            key={loadingScheme}
            onClick={() => {
              snack({
                description: "大丈夫、あなたなら出来るわ。",
                loadingScheme,
                title: "セイラ・マス",
              })
            }}
          >
            Add "{toTitleCase(loadingScheme)}" Snack
          </Button>
        )}
      </For>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Change Direction

To change direction, set `"start"` or `"end"` to the `direction` prop. The default is `"start"`.

```tsx
const { snack, snacks } = useSnacks({ direction: "end" })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          snack({
            description:
              "認めたくないものだな。自分自身の、若さゆえの過ちというものを。",
            title: "シャア・アズナブル",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Limit the Number of Displays

To limit the number of displays, set a number to the `limit` prop. If you want to display an unlimited number of notifications, set it to `null`. By default, `3` is set.

```tsx
const { snack, snacks } = useSnacks({ limit: 5 })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          snack({
            description: "殴られもせずに一人前になった奴がどこにいるものか！",
            title: "ブライト・ノア",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Set the Display Duration

To set the display duration, set a number (in milliseconds) to the `duration` prop.

```tsx
const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          snack({
            description: "それでも男ですか！軟弱者！",
            duration: 30000,
            title: "セイラ・マス",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Disable the Close Button

To disable the close button, set `closable` to `false`.

```tsx
const { snack, snacks } = useSnacks({ closable: false })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          snack({
            description: "ザクとは違うのだよ、ザクとは！",
            title: "ランバ・ラル",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Close Notifications

To close notifications, use `snack.close` or `snack.closeAll`.

```tsx
const { snack, snacks } = useSnacks()
const id = useRef<string | undefined>(undefined)

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          id.current = snack({
            description: "オレは、生きる！生きて、アイナと添い遂げる！",
            title: "シロー・アマダ",
          })
        }}
      >
        Add Snack
      </Button>

      <Button
        colorScheme="warning"
        onClick={() => {
          if (id.current) snack.close(id.current)
        }}
      >
        Close last Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

### Update Notifications

To update notifications, use `snack.update`.

```tsx
const { snack, snacks } = useSnacks()
const id = useRef<string | undefined>(undefined)

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          id.current = snack({
            description:
              "今の私は、クワトロ・バジーナ大尉だ。それ以上でも、それ以下でもない。",
            title: "クワトロ・バジーナ",
          })
        }}
      >
        Add Snack
      </Button>

      <Button
        colorScheme="warning"
        onClick={() => {
          if (id.current)
            snack.update(id.current, {
              colorScheme: "purple",
              description: "そんな大人、修正してやる！",
              title: "カミーユ・ビダン",
            })
        }}
      >
        Update last Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} />

    <Input placeholder="Input" />
  </VStack>
)
```

## Props

| Prop              | Default     | Type                                                                                                                      | Description                                                  |
| ----------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| `as`              | -           | `DOMElement`                                                                                                              | The HTML element to render.                                  |
| `asChild`         | -           | `boolean`                                                                                                                 | Merges its props onto its immediate child.                   |
| `css`             | -           | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                              |
| `colorScheme`     | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                  |
| `snacks`          | -           | `UseSnacksReturn["snacks"]`                                                                                               | The snacks created by `useSnacks`.                           |
| `gap`             | `"md"`      | `"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...`                             | The CSS `gap` property.                                      |
| `gutter`          | `[0, "lg"]` | `[CSSProps["paddingTop"], CSSProps["paddingBottom"]]`                                                                     | A property that provides spacing between the top and bottom. |
| `listProps`       | -           | `HTMLMotionProps`                                                                                                         | Props for the snacks list element.                           |
| `negativeMargins` | `true`      | `boolean`                                                                                                                 | If `true`, apply gutter value to negative margins            |

## Similar Components

- [Alert](https://yamada-ui.com/docs/components/alert.md): `Alert` is a component that conveys information to the user.
- [Tip](https://yamada-ui.com/docs/components/tip.md): `Tip` is a component that displays supplementary information with a built-in icon trigger.
- [EmptyState](https://yamada-ui.com/docs/components/empty-state.md): `EmptyState` is a component used to display when a resource is empty or unavailable.
- [CircleProgress](https://yamada-ui.com/docs/components/circle-progress.md): `CircleProgress` is a component that displays progress in a circular progress bar.
- [Progress](https://yamada-ui.com/docs/components/progress.md): `Progress` is a component for visually indicating progress.
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded.
- [Status](https://yamada-ui.com/docs/components/status.md): `Status` is component that indicate the status of a process or state.

## Uses Components & Hooks

- [CloseButton](https://yamada-ui.com/docs/components/close-button.md): `CloseButton` is a component used primarily to trigger the close functionality of a component.
- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.
- [Alert](https://yamada-ui.com/docs/components/alert.md): `Alert` is a component that conveys information to the user.

- [useTimeout](https://yamada-ui.com/docs/hooks/use-timeout.md): `useTimeout` is a custom hook that executes a function after a specified number of milliseconds.