---
title: Snacks
description: "`Snacks`は、フォームなどで使用される通知を制御するコンポーネントです。"
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
---

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

## 使い方

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

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

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

```tsx
<Snacks />
```

### バリアントを変更する

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

### カラースキー厶を変更する

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

### ステータスを変更する

ステータスを変更する場合は、`status`を設定します。

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

### ローディングスキームを変更する

ローディングスキームを変更する場合は、`loadingScheme`を設定します。

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

### 方向を変更する

方向を変更する場合は、`direction`に`"start"`または`"end"`を設定します。デフォルトでは、`"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`に数値を設定します。もし、無制限に表示する場合は、`null`を設定します。デフォルトでは、`3`が設定されています。

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

### 表示時間を設定する

表示時間を設定する場合は、`duration`に数値(ミリ秒)を設定します。

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

### 閉じるボタンを無効にする

閉じるボタンを無効にする場合は、`closable`を`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>
)
```

### 通知を閉じる

通知を閉じる場合は、`snack.close`や`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>
)
```

### 通知を更新する

通知を更新する場合は、`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            |