Alert

무슨 일이 일어났는지 알리는 메시지. 그 일이 벌어진 페이지 안에 놓입니다.

import { Alert } from 'neba';

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

Props

Prop	타입	기본값	설명
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	'Dismiss'	닫기 버튼의 접근성 이름
children	ReactNode	—	메시지

예시

세 가지 모양은 하나의 컴포넌트입니다

한 줄, 글리프가 붙은 한 줄, 그리고 제목과 그 아래 설명. 세 개의 컴포넌트가 아니라 같은 슬롯을 어디까지 채웠는지의 차이입니다. 표면은 전혀 달라지지 않고, 얼마나 쓰였는지만 달라집니다.

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와 달리 시트가 실제로 물듭니다. 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>
  );
}

심각도

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

액션과 닫기

action을 children에서 빼 둔 이유는, 메시지가 여러 줄로 줄바꿈되어도 액션은 첫 줄에 남아 있어야 하기 때문입니다. 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>
  );
}

글리프도 메시지의 일부입니다

느낌표 하나를 여섯 가지 색으로 칠하는 대신, 여섯 계열에 세 가지 그림을 씁니다. 색은 모든 독자가 가진 감각이 아니고, "이게 잘못됐다"를 빨강으로만 말하는 알림은 일부에게만 말하는 알림입니다. primary와 secondary는 그릴 심각도가 없으므로 정보 알림과 같은 그림을 씁니다.

주변 문장이 이미 어떤 종류의 메시지인지 말하고 있다면 icon={false}를, 더 나은 그림이 있다면 노드를 넘기세요.

접근성

심각도가 live region을 정합니다. warning과 danger는 스크린 리더가 하던 말을 끊는 role="alert", 나머지는 말이 끊길 때까지 기다리는 role="status"입니다. "실패했다"는 끊을 만하고 "저장했다"는 그렇지 않습니다.

더 잘 아는 호출자가 이깁니다 — role은 그대로 통과해서 기본값 뒤에 놓입니다.

color의 기본값은 primary가 아니라 info입니다. 여기가 primary가 거짓말이 되는 유일한 자리입니다. Alert는 무엇의 "주된" 것도 아니고 그냥 알림이며, 팔레트에는 이미 그것을 가리키는 단어가 있습니다.