Notification

Yamada UI supports the necessary notifications in the application.

Usage

To display a notification, use useNotice. useNotice returns an instance to display and control the notification.

Editable example

const notice = useNotice()

return (
  <Button
    onClick={() =>
      notice({ title: "Notification", description: "This is description." })
    }
  >
    Show notification
  </Button>
)

Copied!

Customize Notifications

The notification options are passed as arguments to useNotice or to the instance returned from useNotice.

The arguments of the instance returned from useNotice take precedence.

Change Display Time

You can change the display time with duration.

Editable example

const notice = useNotice({ duration: 8000 })

return (
  <Button
    onClick={() =>
      notice({
        title: "Notification",
        description: "This is description.",
        duration: 10000,
      })
    }
  >
    Show notification
  </Button>
)

Copied!

Maintain

To maintain the display, set duration to null.

Editable example

const notice = useNotice({ duration: null, isClosable: true })

return (
  <Button
    onClick={() =>
      notice({ title: "Notification", description: "This is description." })
    }
  >
    Show notification
  </Button>
)

Copied!

If you maintain the display, it is recommended to set isClosable to true. Otherwise, the user has no means to close the notification.

Change Position

To change the display position, modify it with placement.

Editable example

const notice = useNotice()
const placements = [
  "top-left",
  "top",
  "top-right",
  "bottom-left",
  "bottom",
  "bottom-right",
]

return (
  <Wrap gap="md">
    {placements.map((placement) => (
      <Button
        key={placement}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            placement,
          })
        }
      >
        Show "{placement}" notification
      </Button>
    ))}
  </Wrap>
)

Copied!

Limiting the Number of Displays

To limit the number of displays, change it with limit.

Editable example

const notice = useNotice({ limit: 3 })

return (
  <Button
    onClick={() =>
      notice({ title: "Notification", description: "This is description." })
    }
  >
    Show notification
  </Button>
)

Copied!

Changing Variants

We use the same variants as Alert.

Editable example

const notice = useNotice()
const variants = ["basic", "solid", "subtle", "top-accent", "left-accent"]

return (
  <Wrap gap="md">
    {variants.map((variant) => (
      <Button
        key={variant}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            variant,
          })
        }
      >
        Show "{variant}" notification
      </Button>
    ))}
  </Wrap>
)

Copied!

Change Status

The status changes the color of the notification.

Editable example

const notice = useNotice()
const statuses = ["info", "success", "warning", "error", "loading"]

return (
  <Wrap gap="md">
    {statuses.map((status) => (
      <Button
        key={status}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            status,
          })
        }
      >
        Show "{status}" notification
      </Button>
    ))}
  </Wrap>
)

Copied!

Using Color Schemes

To change colors, modify colorScheme.

Editable example

const notice = useNotice()
const colorSchemes = ["green", "purple", "gray", "pink"]

return (
  <Wrap gap="md">
    {colorSchemes.map((colorScheme) => (
      <Button
        key={colorScheme}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            colorScheme,
          })
        }
      >
        Show "{colorScheme}" notification
      </Button>
    ))}
  </Wrap>
)

Copied!

Changing the Loading Variant

You can change the variant of the loading icon with icon.variant.

Editable example

const notice = useNotice()
const variants = ["oval", "puff", "dots", "grid"]

return (
  <Wrap gap="md">
    {variants.map((variant) => (
      <Button
        key={variant}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            status: "loading",
            icon: { variant },
          })
        }
      >
        Show "{variant}" notification
      </Button>
    ))}
  </Wrap>
)

Copied!

Update Notification

To update a notification, pass new options specifying the id generated from the instance.

Editable example

const notice = useNotice()
const ref = useRef<string | number | undefined>(undefined)

const onOpen = () => {
  ref.current = notice({
    title: "Notification",
    description: "This is description.",
    colorScheme: "orange",
    duration: 30000,
  })
}
const onUpdate = () => {
  if (ref.current)
    notice.update(ref.current, {
      title: "Updated notification",
      description: "This is updated description.",
      colorScheme: "blue",
      duration: 30000,
    })
}

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

Copied!

Close Notification

To close all notifications, use the closeAll method of the instance. To close individual notifications, specify the id generated from the instance.

Editable example

const notice = useNotice()
const ref = useRef<string | number | undefined>(undefined)

const onOpen = () => {
  ref.current = notice({
    title: "Notification",
    description: "This is description.",
    duration: 30000,
    isClosable: true,
  })
}

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

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

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

Copied!

Customize the Close Event

To customize the close event, set closeStrategy to "element", "button", or "both". The default is "button".

"element": Close by clicking the element.
"button": Close by clicking the close button.
"both": Close by clicking either the element or the close button.

Editable example

const notice = useNotice({ isClosable: true, closeStrategy: "element" })

return (
  <Button
    onClick={() =>
      notice({
        title: "Notification",
        description: "This is description.",
        isClosable: true,
        closeStrategy: "element",
      })
    }
  >
    Show notification
  </Button>
)

Copied!

Customizing Components

To customize the component to be rendered, use component.

Editable example

const notice = useNotice({
  component: ({ description }) => (
    <Box color="white" py={3} px={4} bg="purple.500">
      {description}
    </Box>
  ),
})

return (
  <Button onClick={() => notice({ description: "This is description." })}>
    Show notification
  </Button>
)

Copied!

Customize the Style

Editable example

const notice = useNotice({ style: { maxW: "100%", minW: "100%" } })

return (
  <Wrap gap="md">
    <Button
      onClick={() =>
        notice({
          title: "Notification",
          description: "This is description.",
          isClosable: true,
        })
      }
    >
      Show notification
    </Button>

    <Button
      onClick={() =>
        notice({
          title: "Notification",
          description: "This is description.",
          isClosable: true,
          style: { minW: "60%" },
        })
      }
    >
      Show individual style notification
    </Button>
  </Wrap>
)

Copied!

Customize from Config

If you want to set the notifications for the entire application, customize the config.

For example, if you want to set the display position to the bottom right and limit the number to 3 for the entire application, pass options to notice.options.

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

const customConfig = extendConfig({
  notice: {
    options: {
      placement: "bottom-right",
      limit: 3,
    },
  },
})

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

Copied!

If you want to learn more about config, please check Customize Config.

Edit this page on GitHub

PreviousLoading Nextui