FeedbackMessage
Message
Display global messages as feedback in response to user operations.
When To Use
- To provide feedback such as success, warning, error etc.
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
Installation
npx shadcn@latest add https://hotdogui.com/registry/message.jsonpnpm dlx shadcn@latest add https://hotdogui.com/registry/message.jsonyarn dlx shadcn@latest add https://hotdogui.com/registry/message.jsonbun x shadcn@latest add https://hotdogui.com/registry/message.jsonExamples
Preview
Code
MessageDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3
4export const MessageDemo = () => {
5 return (
6 <div className="flex flex-col space-y-4">
7 <div className="flex gap-4">
8 <Button
9 variant="default"
10 color="primary"
11 onClick={() => message({ message: "This is a message!" })}
12 >
13 Open Message
14 </Button>
15 <Button
16 variant="default"
17 color="secondary"
18 onClick={() =>
19 message({
20 message: "This is a message!",
21 description: "This is a message description.",
22 })
23 }
24 >
25 With Description
26 </Button>
27 </div>
28 </div>
29 );
30};Message Types
Preview
Code
MessageTypesDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3
4export const MessageTypesDemo = () => {
5 const handleMessage = (type: "success" | "error" | "info" | "warning" | "default") => {
6 message[type]({
7 message: `This is a ${type} message!`,
8 description: `This message indicates a ${type} operation.`,
9 duration: 3000,
10 });
11 };
12
13 return (
14 <div className="flex flex-col space-y-4">
15 <div className="flex gap-4">
16 <Button
17 variant="default"
18 color="primary"
19 onClick={() => handleMessage("default")}
20 >
21 Open Message
22 </Button>
23 <Button
24 variant="default"
25 color="success"
26 onClick={() => handleMessage("success")}
27 >
28 Open Message
29 </Button>
30 <Button
31 variant="default"
32 color="danger"
33 onClick={() => handleMessage("error")}
34 >
35 Open Message
36 </Button>
37 <Button
38 variant="default"
39 color="warning"
40 onClick={() => handleMessage("warning")}
41 >
42 Open Message
43 </Button>
44 <Button
45 variant="default"
46 color="info"
47 onClick={() => handleMessage("info")}
48 >
49 Open Message
50 </Button>
51 </div>
52 </div>
53 );
54};CustomIcon
Preview
Code
MessageCustomIconDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3import { Clock2 } from "lucide-react";
4
5export const MessageCustomIconDemo = () => {
6 return (
7 <div className="flex flex-col space-y-4">
8 <div className="flex gap-4">
9 <Button
10 variant="default"
11 color="primary"
12 onClick={() => message.warning({ message: "This is a message!", Icon: Clock2 })}
13 >
14 Open Message
15 </Button>
16 </div>
17 </div>
18 );
19};Duration
Preview
Code
MessageDurationDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3
4export const MessageDurationDemo = () => {
5 return (
6 <div className="flex flex-col space-y-4">
7 <div className="flex gap-4">
8 <Button
9 variant="default"
10 color="primary"
11 onClick={() =>
12 message({ message: "This is a message!", duration: 1000 })
13 }
14 >
15 Open Message (1s)
16 </Button>
17 <Button
18 variant="default"
19 color="secondary"
20 onClick={() =>
21 message({
22 message: "This is a message!",
23 duration: 3000,
24 })
25 }
26 >
27 Open Message (3s)
28 </Button>
29 </div>
30 </div>
31 );
32};Message Stack
Preview
Code
MessageStackDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3
4export const MessageStackDemo = () => {
5 return (
6 <div className="flex flex-col space-y-4">
7 <div className="flex gap-4">
8 <Button
9 variant="default"
10 color="primary"
11 onClick={() =>
12 message({ key: "stack-message", message: "This is a message!" })
13 }
14 >
15 Open Message
16 </Button>
17 <Button
18 variant="default"
19 color="secondary"
20 onClick={() =>
21 message.success({
22 key: "stack-message",
23 message: "This is a message!",
24 })
25 }
26 >
27 Open Message
28 </Button>
29 <Button
30 variant="default"
31 color="info"
32 onClick={async () => {
33 message.warning({
34 key: "stack-message",
35 message: "This is a message!",
36 });
37 await new Promise((resolve) => setTimeout(resolve, 1000));
38 message.info({
39 key: "stack-message",
40 message: "This is a message!",
41 });
42 await new Promise((resolve) => setTimeout(resolve, 1000));
43 message.error({
44 key: "stack-message",
45 message: "This is a message!",
46 });
47 }}
48 >
49 Open Message
50 </Button>
51 </div>
52 </div>
53 );
54};Loading Message
Preview
Code
MessageLoadingDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3
4export const MessageLoadingDemo = () => {
5 return (
6 <div className="flex flex-col space-y-4">
7 <div className="flex gap-4">
8 <Button
9 variant="default"
10 color="primary"
11 onClick={async () => {
12 message.loading({
13 key: "some-process-key",
14 message: "This is a loading message!",
15 });
16 await new Promise((resolve) => setTimeout(resolve, 2000));
17 message.success({
18 key: "some-process-key",
19 message: "This is a success message!",
20 });
21 }}
22 >
23 Open Message
24 </Button>
25 </div>
26 </div>
27 );
28};With Sound
Preview
Code
MessageSoundDemo.tsx
1import React from "react";
2import { Button, message } from "@/components/hotdog-ui";
3import { CodeBlock } from "@/components/ui/code-block";
4
5export const MessageSoundDemo = () => {
6 return (
7 <div className="flex flex-col space-y-4">
8 <div className="flex gap-4">
9 <Button
10 variant="default"
11 color="primary"
12 onClick={() =>
13 message.success({ message: "This is a message!", sound: "/assets/ding-sound.mp3" })
14 }
15 >
16 Open Message
17 </Button>
18 </div>
19 </div>
20 );
21};Api
Last updated on