Skip to main content

Feedback

Badge

Compact status pill with semantic color variants.

Element
<span>
Module
@basenative/components
Function
renderBadge

Quick start

Import the render function and call it from your server template.

import { renderBadge } from '@basenative/components';

renderBadge('Active', { variant: 'success' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Variants

Default, primary, success, warning, error.

Live render
Default Primary Success Warning Error
Source
renderBadge('Default', { variant: 'default' })
renderBadge('Primary', { variant: 'primary' })
renderBadge('Success', { variant: 'success' })
renderBadge('Warning', { variant: 'warning' })
renderBadge('Error',   { variant: 'error' })

Live counter badge

A signal drives the badge content as you click.

Live render
Source
const unread = signal(3);

// renderBadge() is a server helper; in the browser the signal drives the markup directly.
effect(() => {
  const variant = unread() > 5 ? 'error' : 'primary';
  slot.innerHTML = '<span data-bn="badge" data-variant="' + variant + '">' + unread() + '</span>';
});

inc.onclick = () => unread.set(unread() + 1);
dec.onclick = () => unread.set(Math.max(0, unread() - 1));

Options

Arguments accepted by renderBadge().

renderBadge option reference
Option Type Default Description
content string — Badge text.
variant 'default' | 'primary' | 'success' | 'warning' | 'error' 'default' Color variant.