Alert

重要な情報やフィードバックを表示するための通知コンポーネント

Variants

4種類のバリアント

Info

This is an informational alert message.

Success

Your changes have been saved successfully!

Warning

Please review your input before proceeding.

Error

An error occurred while processing your request.

With Title

タイトル付きアラート

Did you know?

You can customize the appearance of this component using props.

Payment Complete

Your transaction has been processed successfully. A confirmation email has been sent.

Account Verification

Please verify your email address to unlock all features.

Connection Failed

Unable to connect to the server. Please check your internet connection.

Dismissible

閉じることができるアラート

Dismissible Alert

Click the X button to dismiss this alert.

Use Cases

実際の使用例

System Maintenance

Scheduled maintenance will occur on Sunday, 2:00 AM - 4:00 AM JST.

File uploaded successfully!

Storage Almost Full

You've used 90% of your storage. Consider upgrading your plan.

Form Validation Error

Email address is required
Password must be at least 8 characters
Please accept the terms of service

Usage

コンポーネントの使用例

tsx

class="token keyword">import { Alert } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

class="token keyword">class=class="token keyword">class="token string">"token comment">// Basic
<class="token tag">Alert variant=class="token keyword">class="token string">"info">Info message</class="token tag">Alert>
<class="token tag">Alert variant=class="token keyword">class="token string">"success">Success message</class="token tag">Alert>
<class="token tag">Alert variant=class="token keyword">class="token string">"warning">Warning message</class="token tag">Alert>
<class="token tag">Alert variant=class="token keyword">class="token string">"error">Error message</class="token tag">Alert>

class="token keyword">class=class="token keyword">class="token string">"token comment">// With title
<class="token tag">Alert variant=class="token keyword">class="token string">"info" title=class="token keyword">class="token string">"Information">
  Detailed message here.
</class="token tag">Alert>

class="token keyword">class=class="token keyword">class="token string">"token comment">// Dismissible
class="token keyword">const [show, setShow] = class="token function">useState(class="token keyword">true);
{show && (
  <class="token tag">Alert
    variant=class="token keyword">class="token string">"info"
    dismissible
    onDismiss$={() => class="token function">setShow(class="token keyword">false)}
  >
    This alert can be dismissed.
  </class="token tag">Alert>
)}

class="token keyword">class=class="token keyword">class="token string">"token comment">// With custom content
<class="token tag">Alert variant=class="token keyword">class="token string">"error" title=class="token keyword">class="token string">"Validation Errors">
  <class="token tag">ul>
    <class="token tag">li>Error class="token number">1</class="token tag">li>
    <class="token tag">li>Error class="token number">2</class="token tag">li>
  </class="token tag">ul>
</class="token tag">Alert>

Props

コンポーネントのプロパティ

Prop	Type	Default	Description
variant	"info" \| "success" \| "warning" \| "error"	"info"	アラートのタイプ
title	string	-	アラートのタイトル
dismissible	boolean	false	閉じるボタンの表示
onDismiss$	QRL<() => void>	-	閉じるボタンのハンドラー