SEED Design
Deprecated

Inline Banner (Deprecated)

Use Page Banner instead. 

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

Props

InlineBanner

Prop

Type

ActionableInlineBanner

Prop

Type

DismissibleInlineBanner

Prop

Type

Examples

Content Layout

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

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

Last updated on

FABDeprecated

Previous Page

InlineDeprecated

인라인 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

On this page

Installation
Props
InlineBanner
ActionableInlineBanner
DismissibleInlineBanner
Examples
Content Layout
With Link Label
Text Only
With Icon
With Title Text
With All
Customizable Parts
Rendering LinkInlineBanner’s Link Label as Child
Variants
Neutral Weak (Default)
Positive Weak
Informative Weak
Warning Weak
Warning Solid
Critical Weak
Critical Solid