Badge

Overview#

A small count or text marker, typically used as an overlay on nav items, list rows, or buttons. Renders as a capsule pill.

Per Model 3, colors come from the theme via the semantic variant prop — there are no per-instance overrides.

Copied!

<native:badge :count="3" />

<native:badge :count="3" />

Props#

count - Numeric count. Renders as "99+" for values above 99 (optional, int)
label - Arbitrary short text. Wins over count when both are set (optional, string)
variant - Color variant (optional, string, default: destructive):
- destructive — theme.destructive / theme.onDestructive
- primary — theme.primary / theme.onPrimary
- accent — theme.accent / theme.onAccent
a11y-label - Accessibility label (optional)

Examples#

Count badge#

Copied!

<native:row :gap="8" :align-items="1">
    <native:icon name="notifications" :size="24" />
    <native:badge :count="$unreadCount" />
</native:row>

<native:row :gap="8" :align-items="1">
    <native:icon name="notifications" :size="24" />
    <native:badge :count="$unreadCount" />
</native:row>

Label badge#

Copied!

<native:badge label="New" variant="primary" />

<native:badge label="New" variant="primary" />

Anchored to an icon#

Use a <native:stack> to layer the badge over its target:

Copied!

<native:stack :width="40" :height="40">
    <native:icon name="cart" :size="32" />
    <native:column class="absolute" :top="-2" :right="-2">
        <native:badge :count="$cartItems" />
    </native:column>
</native:stack>

<native:stack :width="40" :height="40">
    <native:icon name="cart" :size="32" />
    <native:column class="absolute" :top="-2" :right="-2">
        <native:badge :count="$cartItems" />
    </native:column>
</native:stack>

Element#

Copied!

use Nativephp\NativeUi\Elements\Badge;
 
Badge::make()
    ->count(3)
    ->variant('primary');
 
Badge::make()
    ->label('New')
    ->variant('accent');

use Nativephp\NativeUi\Elements\Badge;

Badge::make()
    ->count(3)
    ->variant('primary');

Badge::make()
    ->label('New')
    ->variant('accent');

make() - Create a badge
count(int $count) - Numeric count (capped display at 99+)
label(string $text) - Short text label (wins over count)
variant(string $variant) - destructive | primary | accent
a11yLabel(string $value) - Accessibility label