Обзор

AI-компоненты

Хуки

Ресурсы

llms.txt

Alert

Выноска для отображения важной информации.

Обратите внимание!

Опишите здесь, что с этим можно сделать.

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

export default function Particle() {
  return (
    <Alert>
      <AlertTitle>Обратите внимание!</AlertTitle>
      <AlertDescription>
        <p>Опишите здесь, что с этим можно сделать.</p>
      </AlertDescription>
    </Alert>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/alert

Использование

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

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

API

Это пользовательский компонент, а не обёртка над Base UI.

Alert

Корневой контейнер для уведомления.

Свойство	Тип	По умолчанию	Описание
`variant`	`"default" \| "error" \| "info" \| "success" \| "warning"`	`"default"`	Управляет стилизацией и цветовой схемой уведомления

AlertTitle

Текст заголовка уведомления. Отображается как стилизованный div.

AlertDescription

Текст описания уведомления. Отображается как стилизованный div с приглушённым цветом текста.

AlertAction

Контейнер для кнопок действий. Автоматически располагается справа на больших экранах.

Примеры

Со значком

Обратите внимание!

Здесь описаны действия, которые можно предпринять.

import { IconInfoCircle } from "@tabler/icons-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

export default function Particle() {
  return (
    <Alert>
      <IconInfoCircle stroke={1.5} />
      <AlertTitle>Обратите внимание!</AlertTitle>
      <AlertDescription>
        Здесь описаны действия, которые можно предпринять.
      </AlertDescription>
    </Alert>
  );
}

Со значком и кнопками действий

Обратите внимание!

Здесь описаны действия, которые можно предпринять.

import { IconInfoCircle } from "@tabler/icons-react";
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <Alert>
      <IconInfoCircle stroke={1.5} />
      <AlertTitle>Обратите внимание!</AlertTitle>
      <AlertDescription>
        Здесь описаны действия, которые можно предпринять.
      </AlertDescription>
      <AlertAction>
        <Button size="xs" variant="ghost">
          Закрыть
        </Button>
        <Button size="xs">Ок</Button>
      </AlertAction>
    </Alert>
  );
}

Информационное уведомление

Обратите внимание!

Здесь описаны действия, которые можно предпринять.

import { IconInfoCircle } from "@tabler/icons-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

export default function Particle() {
  return (
    <Alert variant="info">
      <IconInfoCircle stroke={1.5} />
      <AlertTitle>Обратите внимание!</AlertTitle>
      <AlertDescription>
        Здесь описаны действия, которые можно предпринять.
      </AlertDescription>
    </Alert>
  );
}

Уведомление об успехе

Обратите внимание!

Здесь описаны действия, которые можно предпринять.

import { IconCircleCheck } from "@tabler/icons-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

export default function Particle() {
  return (
    <Alert variant="success">
      <IconCircleCheck stroke={1.5} />
      <AlertTitle>Обратите внимание!</AlertTitle>
      <AlertDescription>
        Здесь описаны действия, которые можно предпринять.
      </AlertDescription>
    </Alert>
  );
}

Предупреждающее уведомление

Обратите внимание!

Здесь описаны действия, которые можно предпринять.

import { IconAlertTriangle } from "@tabler/icons-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

export default function Particle() {
  return (
    <Alert variant="warning">
      <IconAlertTriangle stroke={1.5} />
      <AlertTitle>Обратите внимание!</AlertTitle>
      <AlertDescription>
        Здесь описаны действия, которые можно предпринять.
      </AlertDescription>
    </Alert>
  );
}

Уведомление об ошибке

Внимание!

Опишите здесь, что можно с этим сделать.

import { IconAlertCircle } from "@tabler/icons-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

export default function Particle() {
  return (
    <Alert variant="error">
      <IconAlertCircle stroke={1.5} />
      <AlertTitle>Внимание!</AlertTitle>
      <AlertDescription>
        Опишите здесь, что можно с этим сделать.
      </AlertDescription>
    </Alert>
  );
}

На этой странице

Установка Использование API Alert AlertTitle AlertDescription AlertAction Примеры Со значком Со значком и кнопками действий Информационное уведомление Уведомление об успехе Предупреждающее уведомление Уведомление об ошибке