Alert

Alert

중요한 정적 메시지로 사용자 주의를 끌 수 있는 컴포넌트예요. 경고, 오류, 성공 등 다양한 상태 메시지를 표시할 때 사용해요.

출처: 문서

본문

Usage

import { Alert } from '@mantine/core';
import { InfoIcon } from '@phosphor-icons/react';

function Demo() {
  const icon = <InfoIcon />;
  return (
    <Alert variant="light" color="blue" title="Alert title" icon={icon}>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. AtIcon officiis, quae tempore necessitatibus placeat saepe.
    </Alert>
  );
}

Styles API

Alert은 Styles API를 지원해요. classNames prop으로 컴포넌트의 어떤 내부 요소든 스타일을 추가할 수 있어요.

Accessibility

• 루트 요소의 role이 alert로 설정됨
• aria-describedby가 body 요소 id로, title이 제공되면 aria-labelledby가 title 요소 id로 설정됨
• closeButtonLabel prop을 설정해 닫기 버튼을 접근 가능하게 함

import { Alert } from '@mantine/core';

function Invalid() {
  // -> not ok
  return <Alert withCloseButton />;
}

function Valid() {
  // -> ok
  return <Alert withCloseButton closeButtonLabel="Close alert" />;
}

function AlsoValid() {
  // -> ok, without close button, closeButtonLabel is not needed
  return <Alert>Content</Alert>;
}

더 알아보기 (Learn more)

• Tree
• EmptyState