Default alert
Info alert!
Change a few things up and try submitting again.
<Alert color="blue">
<span>
<span class="font-medium">Info alert!</span>
Change a few things up and try submitting again.
</span>
</Alert>Alerts with icon
Info alert!
Change a few things up and try submitting again.
<Alert color="blue">
<span>
<span class="font-medium">Info alert!</span>
Change a few things up and try submitting again.
</span>
</Alert>Dismissible alerts
Info alert!
Change a few things up and try submitting again.
<Alert
color="green"
onDismiss={function onDismiss() {
return alert('Alert dismissed!');
}}
>
<span>
<span class="font-medium"> Info alert! </span>
Change a few things up and try submitting again.
</span>
</Alert>Rounded
Info alert!
Change a few things up and try submitting again.
<Alert color="yellow" rounded={false}>
<span>
<span class="font-medium"> Info alert! </span>
Change a few things up and try submitting again.
</span>
</Alert>Border accent
Info alert!
Change a few things up and try submitting again.
<Alert color="yellow" withBorderAccent={true}>
<span>
<span class="font-medium"> Info alert! </span>
Change a few things up and try submitting again.
</span>
</Alert>Additional content
This is a info alert
More info about this info alert goes here. This example text is going to run a bit longer so that you can
see how spacing within an alert works with this kind of content.
<Alert color="blue" icon={HiInformationCircleSolid}>
<h3 class="text-lg font-medium text-blue-700 dark:text-blue-800">This is a info alert</h3>
<div slot="extra">
...
</div>
</div>
</Alert>All Options
This is a info alert
More info about this info alert goes here. This example text is going to run a bit longer so that you can
see how spacing within an alert works with this kind of content.
<Alert color="green" rounded={false} withBorderAccent={true} icon={HiInformationCircleSolid}>
<h3 class="text-lg font-medium text-green-700 dark:text-green-800">This is a info alert</h3>
<div slot="extra">
...
</div>
</div>
</Alert>