Inline Banner

사용자가 꼭 알아야 하는 경고 메시지나 현재 상태를 전달하는 컴포넌트에요.

Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.

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 inline-banner

pnpm dlx @seed-design/cli@latest add inline-banner

yarn dlx @seed-design/cli@latest add inline-banner

bun x @seed-design/cli@latest add inline-banner

Props

`InlineBanner`

Prop	Type	Default
`variant?`	`"neutralWeak" \| "positiveWeak" \| "informativeWeak" \| "warningWeak" \| "warningSolid" \| "criticalWeak" \| "criticalSolid"`	`neutralWeak`
`linkProps?`	`InlineBannerLinkProps`	-
`description?`	`ReactNode`	-
`title?`	`ReactNode`	-
`prefixIcon?`	`ReactNode`	-

`ActionableInlineBanner`

Prop	Type	Default
`variant?`	`"neutralWeak" \| "positiveWeak" \| "informativeWeak" \| "warningWeak" \| "warningSolid" \| "criticalWeak" \| "criticalSolid"`	`neutralWeak`
`description?`	`ReactNode`	-
`title?`	`ReactNode`	-
`prefixIcon?`	`ReactNode`	-

`DismissibleInlineBanner`

Prop	Type	Default
`onDismiss?`	`(() => void)`	-
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	-
`variant?`	`"neutralWeak" \| "positiveWeak" \| "informativeWeak" \| "warningWeak" \| "warningSolid"`	-
`description?`	`ReactNode`	-
`title?`	`ReactNode`	-
`prefixIcon?`	`ReactNode`	-

Examples

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>
  );
}

Woolston

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente. Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum! Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis, deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim, sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus officiis distinctio laborum!

import * as React from "react";

import { ActionButton } from "seed-design/ui/action-button";
import { InlineBanner, type InlineBannerProps } from "seed-design/ui/inline-banner";

import AppScreen from "@/components/stackflow/ActivityLayout";
import type { ActivityComponentType } from "@stackflow/react/future";

declare module "@stackflow/config" {
  interface Register {
    "inline-banner": unknown;
  }
}

const InlineBannerActivity: ActivityComponentType<"inline-banner"> = () => {
  const [variant, setVariant] =
    React.useState<Extract<InlineBannerProps["variant"], "neutralWeak" | "criticalSolid">>(
      "criticalSolid",
    );

  return (
    <AppScreen>
      <InlineBanner
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
        variant={variant}
        {...(variant === "criticalSolid" && { style: { position: "sticky", top: 0 } })}
      />
      <div style={{ display: "flex", flexDirection: "column", padding: "1rem", gap: "0.75rem" }}>
        <ActionButton
          onClick={() =>
            setVariant((prev) => (prev === "criticalSolid" ? "neutralWeak" : "criticalSolid"))
          }
        >
          Toggle tone
        </ActionButton>
        <p style={{ marginBlock: 0, lineHeight: 1.35 }}>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
          Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
          dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
          minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
          voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
          amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
          officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
          blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
          porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
          dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
          eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
          necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
          Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
          asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
          deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
          sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
          sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
          officiis distinctio laborum!
        </p>
      </div>
    </AppScreen>
  );
};

export default InlineBannerActivity;

Inline Banner

Manual Installation

On this page