Pattern to display a chip conditionally?

[ddahan]

Description

Hi there.
This may be a dumb question, but to use components like UChip, I'm wondering how am I supposed to display it conditionally. Obviously, this does not work because if condition is false, nothing is displayed at all:

<template>
  <UChip v-if="condition">
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
</template>

My current workaround is something like:

<template>
  <UChip v-if="condition">
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
  <UButton v-else icon="i-heroicons-inbox" color="gray" />
</template>

But I don't like it as it forces to repeat the content. In the end, I feel forced to extract it in another component, like this:

<template>
  <UChip v-if="condition">
    <MyGreyInboxButton />
  </UChip>
  <MyGreyInboxButton v-else />
</template>

Did I miss something here? Thanks.

[benjamincanac]

You can use the show prop to display it conditionally: https://ui.nuxt.com/components/chip#show

[ddahan]

Thanks a lot, I feel dumb, but relieved :D