Design SystemComponents
Alert
Ensure users are promptly informed of key information or status changes.
Import
import { Alert } from "@dr-max/ui/alert"
The entry carries its own precompiled CSS (including the styles of the Icon and Text parts it composes) — no extra style imports needed.
Usage
Your order is on the way
We will email you the tracking number shortly.
<script setup lang="ts">
import { Alert } from "@dr-max/ui/alert"
</script>
<template>
<Alert
type="info"
title="Your order is on the way"
description="We will email you the tracking number shortly."
/>
</template>
Types
Info
Warning
Error
Success
<template>
<Alert type="info" title="Info" />
<Alert type="warning" title="Warning" />
<Alert type="error" title="Error" />
<Alert type="success" title="Success" />
</template>
Dismissable
Providing the onClose callback renders the close button — the alert stays persistent without it. Hiding the alert is up to the consumer:
<script setup lang="ts">
import { Alert } from "@dr-max/ui/alert"
import { ref } from "vue"
const visible = ref(true)
</script>
<template>
<Alert
v-if="visible"
type="success"
title="Added to cart"
:on-close="() => (visible = false)"
/>
</template>
Custom icon
Each type comes with a matching default icon. Override it with the icon prop, which takes an IconDefinition object imported from @dr-max/ui/icons:
<script setup lang="ts">
import { Alert } from "@dr-max/ui/alert"
import { iconFreeDelivery } from "@dr-max/ui/icons"
</script>
<template>
<Alert :icon="iconFreeDelivery" type="info" title="Free delivery on this order" />
</template>
Playground
Your order is on the way
We will email you the tracking number shortly.
<script setup lang="ts">
import { Alert } from '@dr-max/ui/alert'
</script>
<template>
<Alert type="info" title="Your order is on the way" description="We will email you the tracking number shortly." />
</template>