Alert

사용자에게 중요한 메시지를 표시하는 컴포넌트

Basic Usage

기본적인 알림 메시지를 표시합니다.

Heads up!

You can add components to your app using the cli.

tsx

<Alert>
  <Terminal className="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

Destructive

에러나 위험한 상황을 알릴 때 사용합니다.

Error

Your session has expired. Please log in again.

tsx

<Alert variant="destructive">
  <AlertCircle className="size-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

Without Icon

아이콘 없이 텍스트만 표시할 수 있습니다.

Note

This is a simple alert without an icon.

tsx

<Alert>
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>
    This is a simple alert without an icon.
  </AlertDescription>
</Alert>

Usage

tsx

import { Alert, AlertTitle, AlertDescription } from '@gpters-internal/ui';

function Example() {
  return (
    <Alert variant="default">
      <AlertTitle>Title</AlertTitle>
      <AlertDescription>
        Description text goes here.
      </AlertDescription>
    </Alert>
  );
}