Alert

Alert or Callout is a component that is used to display a message to the user.

Example alert

Example description

'use client'

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

export function AlertExample() {
	return (
		<Alert className="w-full">
			<AlertTitle>Example alert</AlertTitle>
			<AlertDescription>Example description</AlertDescription>
		</Alert>
	)
}

Usage

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

<Alert variant="danger">
	<AlertTitle>Example alert</AlertTitle>
	<AlertDescription>Example description</AlertDescription>
</Alert>

Examples

Default

Example alert

Example description

'use client'

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

export function AlertExample() {
	return (
		<Alert className="w-full">
			<AlertTitle>Example alert</AlertTitle>
			<AlertDescription>Example description</AlertDescription>
		</Alert>
	)
}

Danger

Example alert

Example description

'use client'

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

export function AlertDangerExample() {
	return (
		<Alert variant="danger" className="w-full">
			<AlertTitle>Example alert</AlertTitle>
			<AlertDescription>Example description</AlertDescription>
		</Alert>
	)
}

Info

Example alert

Example description

'use client'

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

export function AlertInfoExample() {
	return (
		<Alert variant="info" className="w-full">
			<AlertTitle>Example alert</AlertTitle>
			<AlertDescription>Example description</AlertDescription>
		</Alert>
	)
}

Success

Example alert

Example description

'use client'

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

export function AlertSuccessExample() {
	return (
		<Alert variant="success" className="w-full">
			<AlertTitle>Example alert</AlertTitle>
			<AlertDescription>Example description</AlertDescription>
		</Alert>
	)
}

Warning

Example alert

Example description

'use client'

import { Alert, AlertTitle, AlertDescription } from '@nerdfish/ui'

export function AlertWarningExample() {
	return (
		<Alert variant="warning" className="w-full">
			<AlertTitle>Example alert</AlertTitle>
			<AlertDescription>Example description</AlertDescription>
		</Alert>
	)
}