try badgeEntity with displayLong option

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue

@@ -0,0 +1,39 @@
+<template>
+
+    <span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
+        {{ $t('renderbox.person') }}
+    </span>
+
+    <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
+        {{ $t('renderbox.type.thirdparty')}}
+
+        <i class="fa fa-user fa-fw" v-if="entity.kind === 'child'"></i>
+        <i class="fa fa-hospital-o fa-fw" v-else-if="entity.kind === 'company'"></i>
+        <i class="fa fa-user-md fa-fw" v-else></i>
+
+        <template v-if="options.displayLong === true">
+            <span v-if="entity.kind === 'child'">{{ $t('tparty.child')}}</span>
+            <span v-else-if="entity.kind === 'company'">{{ $t('tparty.company')}}</span>
+            <span v-else>{{ $t('tparty.contact')}}</span>
+        </template>
+    </span>
+
+</template>
+
+<script>
+export default {
+    name: "BadgeEntity",
+    props: ['options', 'entity'],
+    i18n: {
+        messages: {
+            fr: {
+                tparty: {
+                    child: "Personne de contact",
+                    company: "Personne morale",
+                    contact: "Personne physique",
+                }
+            }
+        }
+    }
+}
+</script>