25 lines
575 B
Vue
25 lines
575 B
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
variant?: "info" | "success" | "warning" | "error";
|
|
title?: string;
|
|
live?: boolean;
|
|
}>(),
|
|
{ variant: "info", title: undefined, live: false },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="ds-alert"
|
|
:class="`ds-alert--${variant}`"
|
|
:role="live ? (variant === 'error' ? 'alert' : 'status') : undefined"
|
|
>
|
|
<span aria-hidden="true">●</span>
|
|
<div>
|
|
<h3 v-if="title" class="ds-alert__title">{{ title }}</h3>
|
|
<div class="ds-alert__body"><slot /></div>
|
|
</div>
|
|
</div>
|
|
</template>
|