2023-02-09 09:19:46 +01:00

36 lines
671 B
Vue

<template>
<ds-tag class="category-tag" :class="filterActive ? 'filterActive' : ''">
<base-icon :name="icon" />
{{ name }}
</ds-tag>
</template>
<script>
export default {
name: 'HcCategory',
props: {
icon: { type: String, required: true },
name: { type: String, default: '' },
filterActive: { type: Boolean, default: false, required: false },
},
}
</script>
<style lang="scss">
.category-tag {
display: inline-flex;
align-items: center;
&.language {
float: right;
}
> .base-icon {
margin-right: $space-xx-small;
font-size: $font-size-base;
}
}
.filterActive {
background-color: $color-success-active;
}
</style>