MessageBox.vue

<script setup>
const props = defineProps(['type', 'msg'])
</script>

<template>
  <div class="message-box" :class="{
    basic: props.type === 'basic',
    danger: props.type === 'danger',
    success: props.type === 'success',
    warning: props.type === 'warning',
  }">
    <span class="message-box__text">{{ props.msg }}</span>
  </div>
</template>

<style scoped>
.message-box {
  padding: var(--spacing-s);
  display: flex;
  border-radius: var(--radius);
}

.message-box.danger {
  color: var(--clr-white);
}

.message-box__text {
  display: flex;
  align-items: center;
  font-size: var(--text-s);
}
</style>