Banner

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 점검, 서비스 저하, 장애처럼 제품 전체의 상태를 모든 사용자에게 알리세요. Banner.Root를 AppShell.Root의 첫 자식으로 두면 셸의 끝에서 끝까지 헤더 위, 또는 사이드바와 콘텐츠 위에 걸치고, 아이콘을 셸의 안쪽 여백에 맞춥니다.
• Banner.Title에 상태를 글로 적으세요. 예: 예정된 점검. 톤은 면과 아이콘에 색을 입히지만 색만으로 상태를 말하지 않습니다. Banner.Description에는 언제, 무엇을 하면 되는지를 들어가면 한 줄로 덧붙입니다. Banner.Actions에는 상태 페이지나 다음 단계로 가는 링크나 버튼을 둡니다. 휴대폰에서는 동작이 글 아래로 내려갑니다.
• 배너는 polite 라이브 영역이라서 글이 바뀌면 흐름을 끊지 않고 알립니다. onDismiss를 주면 닫기 버튼이 생깁니다. 호출되면 배너를 없애세요. 포커스는 배너 다음의 첫 컨트롤로 옮겨 갑니다.

• 한 작업이나 폼에 대한 메시지에는 배너 대신 InlineMessage를, 독자가 방금 한 일의 결과에는 Toast를 쓰세요.
• 배너를 쌓지 마세요. 가장 심각한 상태 하나를 보여 주고 나머지는 상태 페이지에 두세요.
• 장애가 이어지는 동안 위험 배너를 닫을 수 있게 하거나, 닫은 알림을 페이지마다 다시 띄우지 마세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root(tone, role=status) → Icon + Content(Title + Description) + Actions + dismiss button

키보드와 접근성

• 배너는 포커스를 받지 않습니다. Tab은 동작과 닫기 버튼에 닿고, Enter나 Space로 누릅니다.
• 닫은 뒤에는 배너 다음에 있던 첫 컨트롤로 포커스가 옮겨 갑니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { AppShell, Banner, LinkButton } from '@surflane/ui'

<AppShell.Root layout='workspace'>
  {notice && (
    <Banner.Root tone='caution' onDismiss={() => setNotice(false)}>
      <Banner.Icon />
      <Banner.Content>
        <Banner.Title>Scheduled maintenance</Banner.Title>
        <Banner.Description>
          Deployments pause on Saturday, 02:00–04:00 UTC.
        </Banner.Description>
      </Banner.Content>
      <Banner.Actions>
        <LinkButton href='/status' variant='outline' size='small'>
          View status
        </LinkButton>
      </Banner.Actions>
    </Banner.Root>
  )}
  <AppShell.Sidebar>…</AppShell.Sidebar>
  <AppShell.Content>…</AppShell.Content>
</AppShell.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰