Tag Item
Text
Defines the text content displayed in the component.
Tag one
Tag two
<script setup lang="ts">
import { NmorphTagItem } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="tag-text-overview">
<NmorphTagItem value="1" text="Tag one" :removable="false" />
<NmorphTagItem value="2" text="Tag two" :removable="false" />
</div>
</template>Removable
Information
If you want the tag display to be handled automatically, you can wrap the component in NmorphTagList.
Defines whether the component can be removed by the user. Accepts boolean.
Tag zero
Tag one
Tag two
<script setup lang="ts">
import { ref } from "vue";
import { NmorphTagItem } from "@nmorph/nmorph-ui-kit";
const showTag1 = ref(true);
const showTag2 = ref(true);
</script><template>
<div class="tag-removable-overview">
<NmorphTagItem value="0" text="Tag zero" :removable="false" />
<NmorphTagItem
v-show="showTag1"
value="1"
text="Tag one"
removable
@close="showTag1 = false"
/>
<NmorphTagItem
v-show="showTag2"
value="2"
text="Tag two"
removable
@close="showTag2 = false"
/>
</div>
</template>Design
If set to plain, the component uses a token-backed background with contrast text and icons.
Tag one
Tag two
<script setup lang="ts">
import { NmorphTagItem } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="tag-design-overview">
<NmorphTagItem value="1" text="Tag one" design="nmorph" />
<NmorphTagItem value="2" text="Tag two" design="plain" color="var(--nmorph-success-color)" />
</div>
</template>