Banner

배너는 화면 맨 위에서 서비스 전체에 영향을 주는 중요한 메시지를 알려줘요.

결제 정보가 만료되어 3일 뒤 프로젝트가 읽기 전용으로 바뀌어요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/banner.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/banner.json

class-variance-authority 를 설치하고 아래 코드를 components/ui/banner.tsx 에 복사해요.

components/ui/steel/banner.tsx

/** * @title Banner * @description 화면 맨 위에 서비스 전체에 영향을 주는 중요한 메시지를 보여주는 배너예요. */import * as React from 'react';import { cva } from 'class-variance-authority';import { cn } from '@/lib/utils';// Atlassian @atlaskit/banner — components/banner 스펙// 컨테이너: height 3rem, padding space.150, display flex, align-items center// 안쪽 Inline: gap space.050, min-width 0const bannerVariants = cva('flex h-12 items-center p-ds-150', {  variants: {    appearance: {      warning: 'bg-ds-background-warning-bold text-ds-text-warning-inverse',      error: 'bg-ds-background-danger-bold text-ds-text-inverse',      announcement: 'bg-ds-background-neutral-bold text-ds-text-inverse',    },  },  defaultVariants: {    appearance: 'warning',  },});type BannerAppearance = 'warning' | 'error' | 'announcement';export interface BannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {  /** 배너의 색 조합 */  appearance?: BannerAppearance;  /** 아이콘 옆에 들어갈 내용. 보통 텍스트이고 링크를 넣을 수 있어요. */  children?: React.ReactNode;  /** 내용 왼쪽에 보여줄 아이콘 (lucide-react 등) */  icon?: React.ReactElement;  /** 자동화 테스트용 data-testid */  testId?: string;}function Banner({ appearance = 'warning', children, icon, testId, className, ...props }: BannerProps) {  const appearanceType: BannerAppearance =    appearance === 'warning' || appearance === 'error' || appearance === 'announcement' ? appearance : 'warning';  return (    <div      data-slot="banner"      data-appearance={appearanceType}      data-testid={testId}      role="alert"      className={cn(bannerVariants({ appearance: appearanceType }), className)}      {...props}    >      <div className="flex min-w-0 items-center justify-start gap-ds-050">        {icon ? (          <span            data-slot="banner-icon"            className="flex size-6 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0"          >            {icon}          </span>        ) : null}        <span          data-slot="banner-content"          className={cn(            'truncate ds-font-body font-ds-medium',            // 링크는 글자색을 그대로 쓰고 항상 밑줄            '[&_a]:text-current [&_a]:underline [&_a]:decoration-current [&_a]:decoration-solid',            '[&_a:hover]:text-current [&_a:active]:text-current [&_a:visited]:text-current',          )}        >          {children}        </span>      </div>    </div>  );}export { Banner, bannerVariants };

Examples

Appearance	배경 토큰	용도
`warning`	`color.background.warning.bold`	곧 문제가 생기거나 사용자의 조치가 필요할 때
`error`	`color.background.danger.bold`	지금 바로 확인해야 하는 심각한 문제
`announcement`	`color.background.neutral.bold`	관리자가 알리는 일반 공지. 아이콘 없이 써요.

Truncation

배너 높이는 48px 로 고정돼 있어요. 내용이 화면 너비를 넘으면 말줄임표로 잘리고, 펼쳐 볼 방법이 없어요.

라이선스 사용자 수가 한도에 가까워졌어요. 새 담당자를 초대하려면 관리자에게 플랜 변경을 요청해 주세요.

Usage guidelines

배너는 데이터 손실, 기능 중단처럼 서비스를 쓰는 데 직접 영향을 주는 내용을 화면 맨 위에서 알릴 때만 써요. 한 번에 하나만 보여주고, 상황이 해결되면 사라지게 해요. 사용자가 직접 닫을 수는 없어요.

배너는 세 부분으로 이뤄져요.

아이콘: 경고나 오류 아이콘만 써요.
메시지: 문제가 얼마나 심각한지, 어떤 기능에 영향이 있는지, 어떻게 해결하는지 짧게 써요.
액션(선택): 다음 단계로 가는 링크. 도움말 문서는 새 탭에서 열어요.

Do· 꼭 필요할 때만

결제 만료, 점검, 연결 끊김처럼 모든 사용자에게 중요한 정보에만 써요.

Don't· 여러 개 동시에

배너를 여러 개 쌓거나 닫기 버튼을 달지 마세요.

문구는 짧게 써요. 잘린 내용은 사용자가 펼쳐 볼 수 없어요.
서비스 쪽 문제라면 "연결이 끊겼어요"처럼 사용자를 탓하지 않는 표현을 써요.
가능하면 문제를 해결할 수 있는 후속 액션을 함께 제공해요.
이벤트 뒤에 잠깐 보여주는 알림은 Flag, 특정 영역에 대한 안내는 Section Message 를 써요.

Accessibility

배너는 role="alert" 라이브 영역이에요. 포커스를 옮기지 않고 스크린 리더가 바로 읽어줘요. 자주 쓰면 방해가 되니 아주 중요한 메시지에만 써요.
색만으로 심각도를 전달하지 마세요. 경고·오류 아이콘에는 aria-label 을 달아줘요.
포커스를 가져가야 하거나 알림이 아닌 내용은 배너 대신 직접 레이아웃을 구성해요.

/** * @title Banner * @description 화면 맨 위에 서비스 전체에 영향을 주는 중요한 메시지를 보여주는 배너예요. */ import * as React from 'react'; import { cva } from 'class-variance-authority'; import { cn } from '@/lib/utils'; // Atlassian @atlaskit/banner — components/banner 스펙 // 컨테이너: height 3rem, padding space.150, display flex, align-items center // 안쪽 Inline: gap space.050, min-width 0 const bannerVariants = cva('flex h-12 items-center p-ds-150', { variants: { appearance: { warning: 'bg-ds-background-warning-bold text-ds-text-warning-inverse', error: 'bg-ds-background-danger-bold text-ds-text-inverse', announcement: 'bg-ds-background-neutral-bold text-ds-text-inverse', }, }, defaultVariants: { appearance: 'warning', }, }); type BannerAppearance = 'warning' | 'error' | 'announcement'; export interface BannerProps extends Omit<React.ComponentProps<'div'>, 'children'> { /** 배너의 색 조합 */ appearance?: BannerAppearance; /** 아이콘 옆에 들어갈 내용. 보통 텍스트이고 링크를 넣을 수 있어요. */ children?: React.ReactNode; /** 내용 왼쪽에 보여줄 아이콘 (lucide-react 등) */ icon?: React.ReactElement; /** 자동화 테스트용 data-testid */ testId?: string; } function Banner({ appearance = 'warning', children, icon, testId, className, ...props }: BannerProps) { const appearanceType: BannerAppearance = appearance === 'warning' || appearance === 'error' || appearance === 'announcement' ? appearance : 'warning'; return ( <div data-slot="banner" data-appearance={appearanceType} data-testid={testId} role="alert" className={cn(bannerVariants({ appearance: appearanceType }), className)} {...props} > <div className="flex min-w-0 items-center justify-start gap-ds-050"> {icon ? ( <span data-slot="banner-icon" className="flex size-6 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0" > {icon} </span> ) : null} <span data-slot="banner-content" className={cn( 'truncate ds-font-body font-ds-medium', // 링크는 글자색을 그대로 쓰고 항상 밑줄 '[&_a]:text-current [&_a]:underline [&_a]:decoration-current [&_a]:decoration-solid', '[&_a:hover]:text-current [&_a:active]:text-current [&_a:visited]:text-current', )} > {children} </span> </div> </div> ); } export { Banner, bannerVariants };

/** * @title Banner * @description 화면 맨 위에 서비스 전체에 영향을 주는 중요한 메시지를 보여주는 배너예요. */import * as React from 'react';import { cva } from 'class-variance-authority';import { cn } from '@/lib/utils';// Atlassian @atlaskit/banner — components/banner 스펙// 컨테이너: height 3rem, padding space.150, display flex, align-items center// 안쪽 Inline: gap space.050, min-width 0const bannerVariants = cva('flex h-12 items-center p-ds-150', { variants: { appearance: { warning: 'bg-ds-background-warning-bold text-ds-text-warning-inverse', error: 'bg-ds-background-danger-bold text-ds-text-inverse', announcement: 'bg-ds-background-neutral-bold text-ds-text-inverse', }, }, defaultVariants: { appearance: 'warning', },});type BannerAppearance = 'warning' | 'error' | 'announcement';export interface BannerProps extends Omit<React.ComponentProps<'div'>, 'children'> { /** 배너의 색 조합 */ appearance?: BannerAppearance; /** 아이콘 옆에 들어갈 내용. 보통 텍스트이고 링크를 넣을 수 있어요. */ children?: React.ReactNode; /** 내용 왼쪽에 보여줄 아이콘 (lucide-react 등) */ icon?: React.ReactElement; /** 자동화 테스트용 data-testid */ testId?: string;}function Banner({ appearance = 'warning', children, icon, testId, className, ...props }: BannerProps) { const appearanceType: BannerAppearance = appearance === 'warning' || appearance === 'error' || appearance === 'announcement' ? appearance : 'warning'; return ( <div data-slot="banner" data-appearance={appearanceType} data-testid={testId} role="alert" className={cn(bannerVariants({ appearance: appearanceType }), className)} {...props} > <div className="flex min-w-0 items-center justify-start gap-ds-050"> {icon ? ( <span data-slot="banner-icon" className="flex size-6 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0" > {icon} </span> ) : null} <span data-slot="banner-content" className={cn( 'truncate ds-font-body font-ds-medium', // 링크는 글자색을 그대로 쓰고 항상 밑줄 '[&_a]:text-current [&_a]:underline [&_a]:decoration-current [&_a]:decoration-solid', '[&_a:hover]:text-current [&_a:active]:text-current [&_a:visited]:text-current', )} > {children} </span> </div> </div> );}export { Banner, bannerVariants };

설치Copy Anchor Link

수동 설치

ExamplesCopy Anchor Link

AppearanceCopy Anchor Link

TruncationCopy Anchor Link

Usage guidelinesCopy Anchor Link

AccessibilityCopy Anchor Link

PropsCopy Anchor Link

On this page

설치

Examples

Appearance

Truncation

Usage guidelines

Accessibility

Props