Alert

Alerts are used to communicate a state that affects a system, feature or page.

Import

import { Alert } from '@recastui/react';

Usage

Editable Example

<Alert
	icon={IconAlertCircle}
	title='Something went wrong!'
	color='error'
	description='Please check your input and try again.'
/>

Variants

There are 3 variants of the alert component subtle, solid & outline. The default variant is subtle.

Editable Example

<>
	<Alert
		icon={IconAlertCircle}
		title='Something went wrong!'
		color='error'
		description='Please check your input data and try again.'
	/>
	<div className='my-4' />
	<Alert
		variant='solid'
		icon={IconAlertCircle}
		title='Something went wrong!'
		color='error'
		description='Please check your input data and try again.'
	/>
	<div className='my-4' />
	<Alert
		variant='outline'
		icon={IconAlertCircle}
		title='Something went wrong!'
		color='error'
		description='Please check your input data and try again.'
	/>
</>

Colors

You can pass any RecastColor tothe alert component. The default color is info.

Editable Example

<>
	<Alert
		icon={IconAlertCircle}
		title='Purple color'
		color='purple'
		description='Please check your input data and try again.'
	/>
	<div className='my-4' />
	<Alert
		variant='solid'
		icon={IconAlertCircle}
		title='Pink solid color'
		color='pink'
		description='Please check your input data and try again.'
	/>
	<div className='my-4' />
	<Alert
		variant='outline'
		icon={IconAlertCircle}
		title='Just a mono color'
		color='main'
		description='Please check your input data and try again.'
	/>
</>

Status Colors

The most common Alert statuses are error, success, info & warning.

Editable Example

<>
	<Alert
		icon={IconAlertCircle}
		title='Something went wrong!'
		color='error'
		description='Please check your input data and try again.'
	/>
	<div className='my-4' />
	<Alert
		icon={IconCircleCheck}
		title='Great success!'
		color='success'
		description='Your application has been successfully submitted. High five!'
	/>
	<div className='my-4' />
	<Alert
		icon={IconInfoCircle}
		title='Its time to get ready!'
		color='info'
		description='Recastui is going live on April 1st. Get ready!'
	/>
	<div className='my-4' />
	<Alert
		icon={IconAlertTriangle}
		title='Your battery is low'
		color='warning'
		description='Seems like your battery is about die, recharge now.'
	/>
</>

Accessibility

This Alert component has been designed to follow best practices for accessibility:

role='alert is set on the root div of theAlert component.
aria-labelledby is set to the id of the title element of the Alert component.
aria-describedby is set to the id of the description element of the Alert component.