Callout

1import React from 'react'
2
3import Callout from '@/components/ui/callout'
4
5export function CalloutDemo() {
6    return (
7        <div className="space-y-4">
8            <Callout>
9                Useful information that users should know, even when skimming
10                content.
11            </Callout>
12            <Callout type="info">
13                Here’s some helpful context to guide users without distracting
14                from the main content.
15            </Callout>
16            <Callout type="success">
17                Your changes have been saved successfully.
18            </Callout>
19            <Callout type="warning">
20                Be careful—this action can impact other settings.
21            </Callout>
22            <Callout type="error" heading="Something went wrong">
23                We couldn’t complete your request. Please try again later.
24            </Callout>
25            <Callout type="important">
26                Important: Policy updates require your review.
27            </Callout>
28        </div>
29    )
30}
31

1import React from 'react'
2import {
3    AlertOctagon,
4    BadgeInfo,
5    CheckIcon,
6    Megaphone,
7    XSquare,
8} from 'lucide-react'
9
10import Callout from '@/components/ui/callout'
11
12export function CalloutIcon() {
13    return (
14        <div className="space-y-4">
15            <Callout
16                type="warning"
17                icon={<AlertOctagon className="h-5 w-5" aria-hidden />}
18            >
19                Warning: This action may affect other settings.
20            </Callout>
21            <Callout
22                type="error"
23                heading="Something went wrong"
24                icon={<XSquare className="h-5 w-5" aria-hidden />}
25            >
26                We couldn’t complete your request. Please try again or contact
27                support.
28            </Callout>
29            <Callout
30                type="info"
31                icon={<BadgeInfo className="h-5 w-5" aria-hidden />}
32            >
33                Heads up: Here’s helpful context to keep you on track.
34            </Callout>
35            <Callout
36                type="success"
37                icon={<CheckIcon className="h-5 w-5" aria-hidden />}
38            >
39                Success! Your changes were saved.
40            </Callout>
41            <Callout
42                type="important"
43                icon={<Megaphone className="h-5 w-5" aria-hidden />}
44            >
45                Important: Review the latest policy update.
46            </Callout>
47        </div>
48    )
49}
50

1import React from 'react'
2import {
3    AlertOctagon,
4    BadgeCheck,
5    BadgeInfo,
6    CalendarClock,
7    CheckIcon,
8    Lamp,
9    LampCeiling,
10    LampFloor,
11    Lightbulb,
12    Megaphone,
13    XSquare,
14} from 'lucide-react'
15
16import Callout from '@/components/ui/callout'
17
18export function CalloutColor() {
19    return (
20        <div className="space-y-4">
21            <Callout
22                icon={<CalendarClock className="h-5 w-5" aria-hidden />}
23                className="bg-blue/60 text-border border-border"
24                heading="Reminder"
25            >
26                A short helpful tip that guides the user to do something better.
27            </Callout>
28            <Callout
29                icon={<Lightbulb className="h-5 w-5" aria-hidden />}
30                className="text-secondary border-secondary bg-white"
31            >
32                A short helpful tip that guides the user to do something better.
33            </Callout>
34            <Callout
35                icon={<BadgeCheck className="h-5 w-5" aria-hidden />}
36                className="text-primary border-border bg-white"
37            >
38                A confirmation that an action was completed successfully.
39            </Callout>
40        </div>
41    )
42}
43