Alert

방금 일어난 일을 페이지 안에서 알리는 메시지입니다. 저장 성공, 검증 오류, 주의가 필요한 설정처럼 화면에 남아 있어야 하는 알림에 씁니다.

import { Alert } from 'neba';

<Alert color="success">변경 사항을 저장했습니다.</Alert>
<Alert color="danger" title="배포 실패" onClose={dismiss}>
  빌드가 코드 1로 종료되었습니다.
</Alert>;

Props

Prop	타입	기본값	설명
locale	string	—	BCP 47 태그. 닫기 버튼의 접근성 이름을 이 언어로 씁니다
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. 알림은 색이 입혀지는 대상이므로 시트가 실제로 물듭니다. text는 폼 안에 놓을 때
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	높이와 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'info'	심각도. 표면과 글리프를 함께 정합니다. 기본값이 primary가 아닌 info인 이유는, 심각도를 말하지 않은 알림은 정보 알림이기 때문입니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 알림은 페이지 흐름 안에 있습니다. 떠 있는 쪽은 Toast입니다
title	ReactNode	—	제목 줄. 있으면 제목+설명 두 단짜리가 되고, 없으면 전체가 한 줄입니다
icon	ReactNode | false	—	앞머리 글리프. 기본값은 color에 딸린 그림, false면 생략. 색만으로 심각도를 말하지 않기 위해 계열마다 모양이 다릅니다
action	ReactNode	—	행 끝에 고정되는 내용, 재시도 버튼, 링크. 본문이 줄바꿈되어도 첫 줄에 남습니다
onClose	(event) => void	—	넘기면 닫기 버튼이 생깁니다
closeLabel	string	—	닫기 버튼의 접근성 이름
children	ReactNode	—	메시지
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="slide"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

color의 기본값은 primary가 아니라 info입니다.

예시

title과 children

title 없이 children만 주면 한 줄 알림, title을 함께 주면 제목과 본문이 있는 두 줄 알림이 됩니다. 같은 컴포넌트에서 채운 slot의 개수만 다릅니다.

import { Alert } from 'neba';

export default function AlertShapes() {
  return (
    <div className="flex w-full flex-col gap-3">
      {/* A bare line: no glyph, nothing but the sentence. */}
      <Alert icon={false}>Scheduled maintenance on Sunday at 02:00 UTC.</Alert>

      {/* The default: a glyph and a line. */}
      <Alert color="info">Scheduled maintenance on Sunday at 02:00 UTC.</Alert>

      {/* A headline with the detail under it. */}
      <Alert color="info" title="Scheduled maintenance">
        The API will be read-only on Sunday between 02:00 and 03:00 UTC.
      </Alert>
    </div>
  );
}

variant

Alert는 색이 입혀지는 대상이므로 Box와 달리 sheet 자체가 물듭니다. 폼 안에 넣을 때는 text를 쓰세요. 입력 필드 사이에 테두리 사각형이 하나 더 생기지 않습니다.

import { Alert } from 'neba';

export default function AlertVariants() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Alert variant="solid" color="warning" title="Card expiring">
        Your card ends in 4242 and expires next month.
      </Alert>
      <Alert variant="outline" color="warning" title="Card expiring">
        Your card ends in 4242 and expires next month.
      </Alert>
      <Alert variant="text" color="warning" title="Card expiring">
        Your card ends in 4242 and expires next month.
      </Alert>
    </div>
  );
}

color

color가 심각도를 정하고, 심각도에 따라 글리프도 함께 바뀝니다. 여섯 계열에 세 가지 그림이 배정되어 있어 색을 구분하지 못해도 종류가 전달됩니다.

import { Alert } from 'neba';

const MESSAGES = [
  { color: 'info', text: 'Two review apps are still building.' },
  { color: 'success', text: 'Deployed to production.' },
  { color: 'warning', text: 'This region is at 90% of its quota.' },
  { color: 'danger', text: 'The database is unreachable.' }
] as const;

export default function AlertColors() {
  return (
    <div className="flex w-full flex-col gap-3">
      {MESSAGES.map((message) => (
        <Alert key={message.color} color={message.color}>
          {message.text}
        </Alert>
      ))}
    </div>
  );
}

icon

기본 글리프 대신 다른 node를 넘길 수 있고, icon={false}면 글리프를 그리지 않습니다.

Alert 안의 <svg>는 주변 글자의 1.2em으로 그려집니다. 어떤 아이콘 세트에서 가져오든 크기를 따로 맞춰 줄 필요가 없습니다. <svg>가 아닌 것(<img>, 스프라이트, 아이콘 폰트의 글리프)은 자기 크기를 그대로 씁니다.

action과 onClose

action은 children 바깥의 별도 slot이므로, 메시지가 여러 줄로 줄바꿈되어도 액션은 첫 줄에 남습니다. onClose를 넘기면 닫기 버튼(×)이 나타납니다.

import { useState } from 'react';
import { Alert, Button } from 'neba';

export default function AlertDismissing() {
  const [shown, setShown] = useState(true);

  return (
    <div className="flex w-full flex-col items-start gap-3">
      {shown ? (
        <Alert
          color="info"
          title="A new version is available"
          action={
            <Button size="xs" variant="outline" color="info">
              Reload
            </Button>
          }
          closeLabel="Dismiss the update notice"
          onClose={() => setShown(false)}
        >
          Version 2.4 fixes the deploy log ordering.
        </Alert>
      ) : (
        <Button size="sm" variant="text" onClick={() => setShown(true)}>
          Bring it back
        </Button>
      )}
    </div>
  );
}

접근성

• 심각도가 live region을 정합니다. warning과 danger는 screen reader가 읽던 내용을 끊는 role="alert", 나머지는 끊기지 않고 기다리는 role="status"입니다.
• role을 직접 넘기면 기본값을 덮어씁니다.
• 여러 Alert가 있는 화면에서는 closeLabel로 무엇을 닫는지 밝혀 주세요.
• 닫기 버튼의 접근성 이름은 locale이 정합니다. closeLabel로 직접 쓸 수도 있습니다.