Inline message

미리보기

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

사용법

현재 작업에 대한 안내, 오류, 경고를 원인과 다음 단계와 함께 설명하세요. 정적 메시지는 라이브 영역이 아닙니다. 비동기 변경만 알리세요. role=status를 쓰고, 긴급할 때는 role=alert를 쓰세요.

• 톤을 색으로만 구분하지 마세요. 대신 Title과 Description에 상태를 밝히세요.
• 페이지 로드 시 모든 메시지를 alert로 알리지 마세요. 정적 메시지는 알리지 않은 채 두세요.
• 재시도가 실제 결과를 보장한다고 암시하지 마세요. 대신 재시도가 무엇을 시도하는지 말하세요.

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

구성

Root(tone) → Icon(tone) + Content(Title + Description + Actions)

키보드와 접근성

메시지는 포커스를 받지 않습니다. Tab은 액션 버튼에 도달하고 Enter 또는 Space가 이를 활성화합니다. Icon은 장식입니다. Title과 Description이 상태를 전달합니다. Root.role은 호출하는 쪽이 설정합니다.

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

예시 코드

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

import { InlineMessage, Button } from '@surflane/ui'

<InlineMessage.Root tone='danger'>
  <InlineMessage.Icon tone='danger' />
  <InlineMessage.Content>
    <InlineMessage.Title>Discovery failed</InlineMessage.Title>
    <InlineMessage.Description>
      Check the connection and retry.
    </InlineMessage.Description>
    <InlineMessage.Actions>
      <Button onClick={retry}>Retry</Button>
    </InlineMessage.Actions>
  </InlineMessage.Content>
</InlineMessage.Root>

주요 API

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

관련 토큰