React
Inline Banner (Deprecated)
더 이상 사용되지 않습니다. Page Banner를 사용하세요.
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerPreview() {
return (
<VStack gap="x4" width="full">
<InlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
<ActionableInlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
<DismissibleInlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
</VStack>
);
}Installation
npx @seed-design/cli@latest add ui:inline-bannerpnpm dlx @seed-design/cli@latest add ui:inline-banneryarn dlx @seed-design/cli@latest add ui:inline-bannerbun x @seed-design/cli@latest add ui:inline-banner의존성 설치
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:inline-banner
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { PrefixIcon, InlineBanner as SeedInlineBanner, SuffixIcon } from "@seed-design/react";
import * as React from "react";
import { IconChevronRightLine, IconXmarkLine } from "@karrotmarket/react-monochrome-icon"; // "@daangn/react-monochrome-icon"과 동일합니다.
/**
* @deprecated Use page-banner instead.
*/
export interface InlineBannerProps
extends Omit<
SeedInlineBanner.RootProps,
"children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
> {
prefixIcon?: React.ReactNode;
title?: React.ReactNode;
description: React.ReactNode;
linkProps?: SeedInlineBanner.LinkProps;
}
/**
* @see https://seed-design.io/react/components/inline-banner
* @deprecated Use page-banner instead.
*/
export const InlineBanner = React.forwardRef<
React.ElementRef<typeof SeedInlineBanner.Root>,
InlineBannerProps
>(({ prefixIcon, title, description, linkProps, ...otherProps }, ref) => {
return (
<SeedInlineBanner.Root ref={ref} {...otherProps}>
{prefixIcon && <PrefixIcon svg={prefixIcon} />}
<SeedInlineBanner.Content>
{title && <SeedInlineBanner.Title>{title}</SeedInlineBanner.Title>}
<SeedInlineBanner.Description>{description}</SeedInlineBanner.Description>
</SeedInlineBanner.Content>
{linkProps && <SeedInlineBanner.Link {...linkProps} />}
</SeedInlineBanner.Root>
);
});
InlineBanner.displayName = "InlineBanner";
/**
* @deprecated Use page-banner instead.
*/
export interface ActionableInlineBannerProps
extends Omit<
SeedInlineBanner.RootProps,
"children" | "title" | "asChild" | "open" | "defaultOpen" | "onDismiss"
> {
prefixIcon?: React.ReactNode;
title?: React.ReactNode;
description: React.ReactNode;
}
/**
* @see https://seed-design.io/react/components/inline-banner
* @deprecated Use page-banner instead.
*/
export const ActionableInlineBanner = React.forwardRef<
React.ElementRef<typeof SeedInlineBanner.Root>,
ActionableInlineBannerProps
>(({ prefixIcon, title, description, ...otherProps }, ref) => {
return (
<SeedInlineBanner.Root ref={ref} {...otherProps} asChild>
<button type="button">
{prefixIcon && <PrefixIcon svg={prefixIcon} />}
<SeedInlineBanner.Content>
{title && <SeedInlineBanner.Title>{title}</SeedInlineBanner.Title>}
<SeedInlineBanner.Description>{description}</SeedInlineBanner.Description>
</SeedInlineBanner.Content>
<SuffixIcon svg={<IconChevronRightLine />} />
</button>
</SeedInlineBanner.Root>
);
});
ActionableInlineBanner.displayName = "ActionableInlineBanner";
/**
* @deprecated Use page-banner instead.
*/
export interface DismissibleInlineBannerProps
extends Omit<SeedInlineBanner.RootProps, "variant" | "children" | "title" | "asChild"> {
prefixIcon?: React.ReactNode;
title?: React.ReactNode;
description: React.ReactNode;
// While critical variants are discouraged in dismissible, you may remove the restriction if needed.
variant?: Exclude<SeedInlineBanner.RootProps["variant"], "criticalWeak" | "criticalSolid">;
}
/**
* @see https://seed-design.io/react/components/inline-banner
* @deprecated Use page-banner instead.
*/
export const DismissibleInlineBanner = React.forwardRef<
React.ElementRef<typeof SeedInlineBanner.Root>,
DismissibleInlineBannerProps
>(({ prefixIcon, title, description, ...otherProps }, ref) => {
return (
<SeedInlineBanner.Root ref={ref} {...otherProps}>
{prefixIcon && <PrefixIcon svg={prefixIcon} />}
<SeedInlineBanner.Content>
{title && <SeedInlineBanner.Title>{title}</SeedInlineBanner.Title>}
<SeedInlineBanner.Description>{description}</SeedInlineBanner.Description>
</SeedInlineBanner.Content>
{/* You may implement your own i18n for dismiss label */}
<SeedInlineBanner.CloseButton aria-label="닫기">
<SuffixIcon svg={<IconXmarkLine />} />
</SeedInlineBanner.CloseButton>
</SeedInlineBanner.Root>
);
});
DismissibleInlineBanner.displayName = "DismissibleInlineBanner";
/**
* 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.
*/
Props
InlineBanner
Prop
Type
prefixIcon?React.ReactNodetitle?React.ReactNodedescriptionReact.ReactNodelinkProps?SeedInlineBanner.LinkProps | undefinedActionableInlineBanner
Prop
Type
prefixIcon?React.ReactNodetitle?React.ReactNodedescriptionReact.ReactNodeDismissibleInlineBanner
Prop
Type
prefixIcon?React.ReactNodetitle?React.ReactNodedescriptionReact.ReactNodevariant?"neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | undefinedopen?boolean | undefineddefaultOpen?boolean | undefinedonDismiss?(() => void) | undefinedExamples
Content Layout
With Link Label
linkProps prop은 InlineBanner에서만 제공돼요.
import { InlineBanner } from "seed-design/ui/inline-banner";
export default function InlineBannerWithLinkLabel() {
return (
<InlineBanner
description="사업자 정보를 등록해주세요."
linkProps={{ children: "자세히 보기" }}
/>
);
}Text Only
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerTextOnly() {
return (
<VStack gap="x4" width="full">
<InlineBanner description="사업자 정보를 등록해주세요." />
<ActionableInlineBanner description="사업자 정보를 등록해주세요." />
<DismissibleInlineBanner description="사업자 정보를 등록해주세요." />
</VStack>
);
}With Icon
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerWithIcon() {
return (
<VStack gap="x4" width="full">
<InlineBanner prefixIcon={<IconBellFill />} description="사업자 정보를 등록해주세요." />
<ActionableInlineBanner
prefixIcon={<IconBellFill />}
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
prefixIcon={<IconBellFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}With Title Text
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerWithTitleText() {
return (
<VStack gap="x4" width="full">
<InlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
<ActionableInlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
<DismissibleInlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
</VStack>
);
}With All
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerWithAll() {
return (
<VStack gap="x4" width="full">
<InlineBanner
prefixIcon={<IconBellFill />}
title="타이틀"
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
prefixIcon={<IconBellFill />}
title="타이틀"
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
prefixIcon={<IconBellFill />}
title="타이틀"
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Customizable Parts
Rendering LinkInlineBanner’s Link Label as Child
import { InlineBanner } from "seed-design/ui/inline-banner";
export default function InlineBannerLinkLabelAsChild() {
return (
<InlineBanner
description="사업자 정보를 등록해주세요."
linkProps={{
asChild: true,
children: (
<a href="https://www.daangn.com" target="_blank" rel="noreferrer">
자세히 보기
</a>
),
}}
/>
);
}Variants
Neutral Weak (Default)
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerNeutralWeak() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="neutralWeak"
prefixIcon={<IconBellFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="neutralWeak"
prefixIcon={<IconBellFill />}
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
variant="neutralWeak"
prefixIcon={<IconBellFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Positive Weak
import { IconCheckmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerPositiveWeak() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="positiveWeak"
prefixIcon={<IconCheckmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="positiveWeak"
prefixIcon={<IconCheckmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
variant="positiveWeak"
prefixIcon={<IconCheckmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Informative Weak
import { IconILowercaseSerifCircleFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerInformativeWeak() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="informativeWeak"
prefixIcon={<IconILowercaseSerifCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="informativeWeak"
prefixIcon={<IconILowercaseSerifCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
variant="informativeWeak"
prefixIcon={<IconILowercaseSerifCircleFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Warning Weak
import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerWarningWeak() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="warningWeak"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="warningWeak"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
variant="warningWeak"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Warning Solid
import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import {
ActionableInlineBanner,
DismissibleInlineBanner,
InlineBanner,
} from "seed-design/ui/inline-banner";
export default function InlineBannerWarningSolid() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="warningSolid"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="warningSolid"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<DismissibleInlineBanner
variant="warningSolid"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Critical Weak
import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
import { ActionableInlineBanner, InlineBanner } from "seed-design/ui/inline-banner";
export default function InlineBannerCriticalWeak() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="criticalWeak"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="criticalWeak"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Critical Solid
criticalWeak과 criticalSolid variant는 InlineBanner와 ActionableInlineBanner에서만 제공돼요.
variant가 criticalWeak이나 criticalSolid인 경우 position: sticky 등을 활용하여 화면을 스크롤했을 때도 인라인 배너가 상단에 고정되도록 해 주세요.
import { ActionableInlineBanner, InlineBanner } from "seed-design/ui/inline-banner";
import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
import { VStack } from "@seed-design/react";
export default function InlineBannerCriticalSolid() {
return (
<VStack gap="x4" width="full">
<InlineBanner
variant="criticalSolid"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
<ActionableInlineBanner
variant="criticalSolid"
prefixIcon={<IconExclamationmarkCircleFill />}
description="사업자 정보를 등록해주세요."
/>
</VStack>
);
}Last updated on