<script setup>
const {type} = defineProps({
    type: {
        type: String,
        default: 'info'
    }
});
</script>

<template>
    <view :class="['x-tag', type]">
        <slot></slot>
    </view>
</template>

<style scoped lang="scss">
.x-tag {
    font-size: 24rpx;
    padding: 3rpx 8rpx;
    border-radius: 4rpx;
}

.info {
    background-color: var(--primary-color-info);
    color: var(--primary-color);
}

.success {
    background-color: #E8FFEA;
    color: #00B42A;
}

.warn {
    background-color: #FFF7E8;
    color: #FF7D00;
}

.error {
    background-color: #FFECE8;
    color: #F53F3F;
}
</style>
