React
Callout
사용자에게 중요한 정보나 팁을 시각적으로 강조하여 전달하는 메시지 컴포넌트입니다.
사용 가능 버전@seed-design/react@0.0.1, @seed-design/css@0.0.1
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutPreview() {
return (
<VStack gap="x4" width="full">
<Callout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
<ActionableCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
<DismissibleCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
</VStack>
);
}설치
npx @seed-design/cli@latest add ui:calloutpnpm dlx @seed-design/cli@latest add ui:calloutyarn dlx @seed-design/cli@latest add ui:calloutbun x @seed-design/cli@latest add ui:callout의존성 설치
npm install @karrotmarket/react-monochrome-icon @seed-design/reactyarn add @karrotmarket/react-monochrome-icon @seed-design/reactpnpm add @karrotmarket/react-monochrome-icon @seed-design/reactbun add @karrotmarket/react-monochrome-icon @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:callout
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { PrefixIcon, Callout as SeedCallout, SuffixIcon } from "@seed-design/react";
import * as React from "react";
import { IconChevronRightLine, IconXmarkLine } from "@karrotmarket/react-monochrome-icon"; // "@daangn/react-monochrome-icon"과 동일합니다.
export interface CalloutProps
extends Omit<
SeedCallout.RootProps,
"children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
> {
prefixIcon?: React.ReactNode;
title?: React.ReactNode;
description: React.ReactNode;
linkProps?: SeedCallout.LinkProps;
}
/**
* @see https://seed-design.io/react/components/callout
*/
export const Callout = React.forwardRef<React.ElementRef<typeof SeedCallout.Root>, CalloutProps>(
({ prefixIcon, title, description, linkProps, ...otherProps }, ref) => {
return (
<SeedCallout.Root ref={ref} {...otherProps}>
{prefixIcon && <PrefixIcon svg={prefixIcon} />}
<SeedCallout.Content>
{title && <SeedCallout.Title>{title}</SeedCallout.Title>}
<SeedCallout.Description>{description}</SeedCallout.Description>
{linkProps && <SeedCallout.Link {...linkProps} />}
</SeedCallout.Content>
</SeedCallout.Root>
);
},
);
Callout.displayName = "Callout";
export interface ActionableCalloutProps
extends Omit<
SeedCallout.RootProps,
"children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
> {
prefixIcon?: React.ReactNode;
title?: React.ReactNode;
description: React.ReactNode;
}
/**
* @see https://seed-design.io/react/components/callout
*/
export const ActionableCallout = React.forwardRef<
React.ElementRef<typeof SeedCallout.Root>,
ActionableCalloutProps
>(({ prefixIcon, title, description, ...otherProps }, ref) => {
return (
<SeedCallout.Root ref={ref} {...otherProps} asChild>
<button type="button">
{prefixIcon && <PrefixIcon svg={prefixIcon} />}
<SeedCallout.Content>
{title && <SeedCallout.Title>{title}</SeedCallout.Title>}
<SeedCallout.Description>{description}</SeedCallout.Description>
</SeedCallout.Content>
<SuffixIcon svg={<IconChevronRightLine />} />
</button>
</SeedCallout.Root>
);
});
ActionableCallout.displayName = "ActionableCallout";
export interface DismissibleCalloutProps
extends Omit<SeedCallout.RootProps, "children" | "title" | "asChild"> {
prefixIcon?: React.ReactNode;
title?: React.ReactNode;
description: React.ReactNode;
linkProps?: SeedCallout.LinkProps;
}
/**
* @see https://seed-design.io/react/components/callout
*/
export const DismissibleCallout = React.forwardRef<
React.ElementRef<typeof SeedCallout.Root>,
DismissibleCalloutProps
>(({ prefixIcon, title, description, linkProps, ...otherProps }, ref) => {
return (
<SeedCallout.Root ref={ref} {...otherProps}>
{prefixIcon && <PrefixIcon svg={prefixIcon} />}
<SeedCallout.Content>
{title && <SeedCallout.Title>{title}</SeedCallout.Title>}
<SeedCallout.Description>{description}</SeedCallout.Description>
{linkProps && <SeedCallout.Link {...linkProps} />}
</SeedCallout.Content>
{/* You may implement your own i18n for dismiss label */}
<SeedCallout.CloseButton aria-label="닫기">
<SuffixIcon svg={<IconXmarkLine />} />
</SeedCallout.CloseButton>
</SeedCallout.Root>
);
});
DismissibleCallout.displayName = "DismissibleCallout";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
속성
Callout
Prop
Type
prefixIcon?React.ReactNodetitle?React.ReactNodedescriptionReact.ReactNodelinkProps?SeedCallout.LinkProps | undefinedActionableCallout
Prop
Type
prefixIcon?React.ReactNodetitle?React.ReactNodedescriptionReact.ReactNodeDismissibleCallout
Prop
Type
prefixIcon?React.ReactNodetitle?React.ReactNodedescriptionReact.ReactNodelinkProps?SeedCallout.LinkProps | undefinedopen?boolean | undefineddefaultOpen?boolean | undefinedonDismiss?(() => void) | undefined예시
콘텐츠 구성
텍스트만
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutTextOnly() {
return (
<VStack gap="x4" width="full">
<Callout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
<ActionableCallout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
<DismissibleCallout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
</VStack>
);
}아이콘 포함
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutWithIcon() {
return (
<VStack gap="x4" width="full">
<Callout
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}제목 텍스트 포함
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutWithTitleText() {
return (
<VStack gap="x4" width="full">
<Callout
title="타이틀"
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
title="타이틀"
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
title="타이틀"
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}링크 레이블 포함
ActionableCallout에서는 linkProps를 제공하지 않아요.
import { VStack } from "@seed-design/react";
import { Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutWithLinkLabel() {
return (
<VStack gap="x4" width="full">
<Callout
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
linkProps={{ children: "시도해 보기" }}
/>
<DismissibleCallout
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
linkProps={{ children: "시도해 보기" }}
/>
</VStack>
);
}모든 요소 포함
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutWithAll() {
return (
<VStack gap="x4" width="full">
<Callout
title="타이틀"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
linkProps={{ children: "시도해 보기" }}
/>
<DismissibleCallout
title="타이틀"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
linkProps={{ children: "시도해 보기" }}
/>
</VStack>
);
}커스터마이징 가능한 요소
링크 레이블을 자식 요소로 렌더링
import { VStack } from "@seed-design/react";
import { Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutLinkLabelAsChild() {
return (
<VStack gap="x4" width="full">
<Callout
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
linkProps={{
asChild: true,
children: (
<a href="https://www.daangn.com" target="_blank" rel="noreferrer">
시도해 보기
</a>
),
}}
/>
<DismissibleCallout
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
linkProps={{
asChild: true,
children: (
<a href="https://www.daangn.com" target="_blank" rel="noreferrer">
시도해 보기
</a>
),
}}
/>
</VStack>
);
}톤
중립 (기본값)
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutNeutral() {
return (
<VStack gap="x4" width="full">
<Callout
tone="neutral"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
tone="neutral"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
tone="neutral"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}정보
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutInformative() {
return (
<VStack gap="x4" width="full">
<Callout
tone="informative"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
tone="informative"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
tone="informative"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}긍정
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutPositive() {
return (
<VStack gap="x4" width="full">
<Callout
tone="positive"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
tone="positive"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
tone="positive"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}경고
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutWarning() {
return (
<VStack gap="x4" width="full">
<Callout
tone="warning"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
tone="warning"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
tone="warning"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}위험
import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutCritical() {
return (
<VStack gap="x4" width="full">
<Callout
tone="critical"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<ActionableCallout
tone="critical"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
<DismissibleCallout
tone="critical"
prefixIcon={<IconCalendarFill />}
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
/>
</VStack>
);
}매직
import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
import { VStack } from "@seed-design/react";
import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";
export default function CalloutMagic() {
return (
<VStack gap="x4" width="full">
<Callout
tone="magic"
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
prefixIcon={<IconSparkle2 />}
/>
<ActionableCallout
tone="magic"
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
prefixIcon={<IconSparkle2 />}
/>
<DismissibleCallout
tone="magic"
description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
prefixIcon={<IconSparkle2 />}
/>
</VStack>
);
}Last updated on