---
title: useNotice
description: "`useNotice` is a custom hook that controls the notifications of the application."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-notice
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-usenotice--basic
---

```tsx
const notice = useNotice()

return (
  <Button
    onClick={() =>
      notice({
        title: "シェリル・ノーム",
        description: "私の歌を聴けー！",
      })
    }
  >
    Show Notice
  </Button>
)
```

## Usage

```tsx
import { useNotice } from "@yamada-ui/react"
```

```tsx
import { useNotice } from "@/components/ui"
```

```tsx
import { useNotice } from "@workspaces/ui"
```

```tsx
const notice = useNotice()
```

### Change Variant

```tsx
const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["plain", "solid", "subtle", "surface", "island"] as const}>
      {(variant) => (
        <Button
          key={variant}
          onClick={() => {
            notice({
              variant,
              description: "こんなサービス、滅多にしないんだからね！",
              title: "シェリル・ノーム",
              withIcon: variant !== "island" ? true : false,
            })
          }}
        >
          Add "{toTitleCase(variant)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)
```

### Change Color Scheme

```tsx
const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["info", "success", "warning", "error"] as const}>
      {(colorScheme) => (
        <Button
          key={colorScheme}
          onClick={() => {
            notice({
              colorScheme,
              description:
                "人は１人じゃ飛べない。飛んじゃいけない。それが分かったから…",
              title: "早乙女アルト",
            })
          }}
        >
          Add "{toTitleCase(colorScheme)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)
```

### Change Loading Scheme

```tsx
const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["oval", "grid", "puff", "dots"] as const}>
      {(loadingScheme) => (
        <Button
          key={loadingScheme}
          onClick={() => {
            notice({
              description: "人を本気で好きになるのは命がけなんだな。",
              loadingScheme,
              title: "ミハエル・ブラン",
            })
          }}
        >
          Add "{toTitleCase(loadingScheme)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)
```

### Change Status

To change the status, set the `status` to `"info"` or `"success"` etc.

```tsx
const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["info", "success", "warning", "error"] as const}>
      {(status) => (
        <Button
          key={status}
          onClick={() => {
            notice({
              description: "皆抱きしめて！銀河の果てまで！",
              status,
              title: "ランカ・リー",
            })
          }}
        >
          Add "{toTitleCase(status)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)
```

### Change Limit

To change the limit, set the `limit` to a number.

```tsx
const notice = useNotice({ limit: 10 })

return (
  <Button
    onClick={() =>
      notice({
        description: "お前の恋は何処にある！",
        title: "クラン・クラン",
      })
    }
  >
    Show Notice
  </Button>
)
```

### Change Duration

To change the duration, set the `duration` to a number.

```tsx
const notice = useNotice({ duration: 10000 })

return (
  <Wrap gap="md">
    <Button
      onClick={() =>
        notice({
          description: "お前も、お前の夢も、俺が守る！",
          title: "オズマ・リー",
        })
      }
    >
      Show Notice
    </Button>

    <Button
      onClick={() =>
        notice({
          description: "お前も、お前の夢も、俺が守る！",
          duration: 5000,
          title: "オズマ・リー",
        })
      }
    >
      Show Notice with Option
    </Button>
  </Wrap>
)
```

### Keep Stay

To keep the notice staying, set the `duration` to `null`.

```tsx
const notice = useNotice({ duration: null })

return (
  <Button
    onClick={() =>
      notice({
        description:
          "覚えておきなさい、こんなにいい女滅多にいないんだからねっ！",
        title: "シェリル・ノーム",
      })
    }
  >
    Show Notice
  </Button>
)
```

### Change Placement

To change the placement, set the `placement` to `"start"` or `"end"` etc.

```tsx
const notice = useNotice({ duration: null })

return (
  <Wrap gap="md">
    <For
      each={
        [
          "start-start",
          "start-center",
          "start-end",
          "end-start",
          "end-center",
          "end-end",
        ] as const
      }
    >
      {(placement) => (
        <Button
          key={placement}
          onClick={() =>
            notice({
              description: "お前が、お前たちが俺の翼だ！",
              placement,
              title: "早乙女アルト",
            })
          }
        >
          Open "{placement}" Notice
        </Button>
      )}
    </For>
  </Wrap>
)
```

### Change Close Strategy

To change the close strategy, set the `closeStrategy` to `"click"` or `"drag"` etc.

```tsx
const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["click", "drag", "button"] as const}>
      {(closeStrategy) => (
        <Button
          key={closeStrategy}
          onClick={() =>
            notice({
              closeStrategy,
              description: "お前が、お前たちが俺の翼だ！",
              title: "早乙女アルト",
            })
          }
        >
          {toTitleCase(closeStrategy)} Only
        </Button>
      )}
    </For>

    <For
      each={
        [
          ["click", "drag"],
          ["button", "drag"],
        ] as NoticeCloseStrategy[][]
      }
    >
      {(closeStrategy) => (
        <Button
          key={closeStrategy.join("-")}
          onClick={() =>
            notice({
              closeStrategy,
              description: "お前が、お前たちが俺の翼だ！",
              title: "早乙女アルト",
            })
          }
        >
          {toTitleCase(closeStrategy[0]!)} & {toTitleCase(closeStrategy[1]!)}
        </Button>
      )}
    </For>
  </Wrap>
)
```

### Close Notice

To close the notice, use `close` or `closeAll`.

```tsx
const notice = useNotice()
const id = useRef<number | string | null>(null)

const onOpen = () => {
  id.current = notice({
    closable: true,
    description: "お前が好きだ。",
    duration: 30000,
    title: "クラン・クラン",
  })
}

const onClose = () => {
  if (id.current) notice.close(id.current)
}

const onCloseAll = () => {
  notice.closeAll()
}

return (
  <Wrap gap="md">
    <Button onClick={onOpen}>Show Notice</Button>
    <Button onClick={onClose}>Close last Notice</Button>
    <Button onClick={onCloseAll}>Close all Notice</Button>
  </Wrap>
)
```

### Update Notice

To update the notice, use `update`.

```tsx
const notice = useNotice()
const id = useRef<number | string | null>(null)

const onOpen = () => {
  id.current = notice({
    colorScheme: "orange",
    description: "チャンスは目の前にあるものよ。",
    duration: 5000,
    title: "シェリル・ノーム",
  })
}

const onUpdate = () => {
  if (id.current)
    notice.update(id.current, {
      colorScheme: "blue",
      description: "人生はワン･ツー･デカルチャー！！頑張れ、私。",
      duration: 5000,
      title: "ランカ・リー",
    })
}

return (
  <Wrap gap="md">
    <Button onClick={onOpen}>Show Notice</Button>
    <Button onClick={onUpdate}>Update last Notice</Button>
  </Wrap>
)
```

## Configuration

### Make Notice Always Expand

To make the notice always expand, set the `expand` to `true`.

```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    expand: true,
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```

### Change Placement

To change the placement, set the `placement` to `"start"` or `"end"` etc.

```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    placement: "end-end",,
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```

### Change Limit

To change the limit, set the `limit` to a number.

```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    limit: 5,
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```

### Change Close Strategy

To change the close strategy, set the `closeStrategy` to `"click"` or `"drag"` etc.

```tsx
import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    closeStrategy: "click",
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```