Alert

Component callout để hiển thị các thông báo quan trọng với nhiều biến thể khác nhau.

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add alert

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add alert

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add alert

bun

bunx @galaxy-stack/nebula-cli@latest add alert

global

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add alert

Dependencies

Component này tự động cài đặt các dependencies sau:

• React: class-variance-authority
• Vue: class-variance-authority
• Angular: class-variance-authority
• React Native: nativewind, tailwindcss
• Flutter: Không cần thêm dependencies

Không cần cài đặt thủ công!

Sử dụng

Ví dụ cơ bản

React

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"

export default function AlertDemo() {
  return (
    <Alert>
      <AlertTitle>Chú ý!</AlertTitle>
      <AlertDescription>Bạn có thể thêm các component vào ứng dụng của mình bằng CLI.</AlertDescription>
    </Alert>
  )
}

Vue

<script setup lang="ts">
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
</script>

<template>
  <Alert>
    <AlertTitle>Chú ý!</AlertTitle>
    <AlertDescription>Bạn có thể thêm các component vào ứng dụng của mình bằng CLI.</AlertDescription>
  </Alert>
</template>

Angular

import { Component } from '@angular/core';
import { AlertComponent, AlertTitleComponent, AlertDescriptionComponent } from '@/components/ui/alert';

@Component({
  selector: 'app-alert-demo',
  standalone: true,
  imports: [AlertComponent, AlertTitleComponent, AlertDescriptionComponent],
  template: `
    <ui-alert>
      <ui-alert-title>Chú ý!</ui-alert-title>
      <ui-alert-description>Bạn có thể thêm các component vào ứng dụng của mình bằng CLI.</ui-alert-description>
    </ui-alert>
  `
})
export class AlertDemoComponent {}

Biến thể Destructive

React

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"

export default function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <AlertTitle>Lỗi</AlertTitle>
      <AlertDescription>Phiên của bạn đã hết hạn. Vui lòng đăng nhập lại.</AlertDescription>
    </Alert>
  )
}

Vue

<script setup lang="ts">
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
</script>

<template>
  <Alert variant="destructive">
    <AlertTitle>Lỗi</AlertTitle>
    <AlertDescription>Phiên của bạn đã hết hạn. Vui lòng đăng nhập lại.</AlertDescription>
  </Alert>
</template>

API Reference

Props

Prop	Type	Default	Description	Framework Support
variant	'default' | 'destructive'	'default'	Kiểu hiển thị của alert	Tất cả
className / class	string	''	Tên class CSS	Tất cả
asChild	boolean	false	Render như child element	Chỉ React, Vue

Accessibility

• Screen Reader: Sử dụng semantic markup với ARIA attributes
• Role: Sử dụng role="alert" cho thông báo quan trọng
• Keyboard: Có thể điều hướng bằng bàn phím

Related Components

• Toast - Hiển thị thông báo tạm thời
• Dialog - Hộp thoại modal
• Alert Dialog - Hộp thoại xác nhận

Source Code

• Vue Component
• React Component
• Angular Component
• React Native Component
• Flutter Widget