Badge
Value
The displayed value on the badge, can be string or number. If omitted and no `value` slot is provided, non-dot badges are not rendered.
abc
99
<script setup lang="ts">
import { NmorphBadge, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="badge-value-overview">
<div class="badge-value-overview__element">
<NmorphBadge value="abc">
<NmorphButton text="button" />
</NmorphBadge>
</div>
<div class="badge-value-overview__element">
<NmorphBadge :value="99">
<NmorphButton text="button" />
</NmorphBadge>
</div>
</div>
</template>Value Slot
Lets you fully replace the content inside the badge through the `value` slot. Slot props expose `value` and `displayValue`. Works in default, ribbon, and tag modes.
12
<script setup lang="ts">
import {
NmorphBadge,
NmorphButton,
NmorphIcon,
NmorphIconPin,
NmorphIconUsers,
} from "@nmorph/nmorph-ui-kit";
const teamSize = 12;
</script><template>
<div class="badge-value-slot-overview">
<NmorphBadge :value="teamSize" color="var(--nmorph-success-color)">
<template #value="{ value }">
<div class="badge-value-slot-overview__content">
<NmorphIcon width="10px" height="10px" color="currentColor">
<NmorphIconUsers />
</NmorphIcon>
<span>{{ value }}</span>
</div>
</template><template #value>
<NmorphIcon>
<NmorphIconPin />
</NmorphIcon>
</template>Max
Maximum value for the badge. If it's set as a number and exceeded, it's displayed as max+.
18+
<script setup lang="ts">
import { NmorphBadge, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="badge-max-overview">
<NmorphBadge :max="18" :value="100">
<NmorphButton text="button" />
</NmorphBadge>
</div>
</template>Type
Switches between default, dot, tag, and ribbon badge display.
4
Tag
top-left
New
top-right
New
bottom-left
New
bottom-right
New
flat corner
Flat
tiny ribbon
Tiny
<script setup lang="ts">
import { NmorphBadge, NmorphButton } from "@nmorph/nmorph-ui-kit";
const ribbonCorners = [
"top-left",
"top-right",
"bottom-left",
"bottom-right",
] as const;
</script><template>
<div class="badge-type-overview">
<NmorphBadge value="4">
<NmorphButton text="Default" />
</NmorphBadge>
<div class="badge-type-overview__dot">
<NmorphBadge type="dot" color="var(--nmorph-error-color)" :dot-size="9">
<NmorphButton text="Dot" />
</NmorphBadge>
</div>
<NmorphBadge type="tag" value="Tag" color="var(--nmorph-success-color)" />
<NmorphBadge
v-for="corner in ribbonCorners"
:key="corner"
value="New"
type="ribbon"
:ribbon-corner="corner"
>
<div class="badge-type-overview__card">{{ corner }}</div>
</NmorphBadge>
<NmorphBadge
value="Flat"
type="ribbon"
ribbon-corner="top-right"
:ribbon-tilt="false"
color="var(--nmorph-success-color)"
>
<div class="badge-type-overview__card">flat corner</div>
</NmorphBadge>
<NmorphBadge
value="Tiny"
type="ribbon"
size="tiny"
ribbon-corner="bottom-right"
>
<div class="badge-type-overview__card">tiny ribbon</div>
</NmorphBadge>
</div>
</template>Color
Background color of the badge.
abc
1
<script setup lang="ts">
import { NmorphBadge, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="badge-color-overview">
<div class="badge-value-overview__element">
<NmorphBadge type="dot" color="red">
<NmorphButton text="button" />
</NmorphBadge>
</div>
<div class="badge-value-overview__element">
<NmorphBadge color="green" value="abc">
<NmorphButton text="button" />
</NmorphBadge>
</div>
<div class="badge-value-overview__element">
<NmorphBadge color="var(--nmorph-warn-color)" :value="1">
<NmorphButton text="button" />
</NmorphBadge>
</div>
</div>
</template>Size
Controls the badge text size through font-size variables.
tiny
extra-small
base
medium
large
extra-large
<script setup lang="ts">
import { NmorphBadge } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="badge-size-overview">
<NmorphBadge type="tag" value="tiny" size="tiny" />
<NmorphBadge type="tag" value="extra-small" size="extra-small" />
<NmorphBadge type="tag" value="base" size="base" />
<NmorphBadge type="tag" value="medium" size="medium" />
<NmorphBadge type="tag" value="large" size="large" />
<NmorphBadge type="tag" value="extra-large" size="extra-large" />
</div>
</template>Offset
Horizontal/vertical offset of the badge relative to its parent.
1
abc
<script setup lang="ts">
import { NmorphBadge, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="badge-offset-overview">
<div class="badge-value-overview__element">
<NmorphBadge :value="1" :offsetX="10" :offsetY="10">
<NmorphButton text="button" />
</NmorphBadge>
</div>
<div class="badge-value-overview__element">
<NmorphBadge value="abc" :offsetX="-70" :offsetY="-35">
<NmorphButton text="button" />
</NmorphBadge>
</div>
</div>
</template>