Skip to main content
Browse docs

Marwes documentation

Badge

Canonical compact-status family with a Badge component, a BadgeGroup composition, and thin purpose-badge wrappers for status, priority, and notification contexts.

What this family solves

Canonical compact-status family with a Badge component, a BadgeGroup composition, and thin purpose-badge wrappers for status, priority, and notification contexts.

Use when

  • The UI needs a compact, non-interactive status label, priority marker, or notification count with stable semantics.
  • The product flow maps clearly to StatusBadge, PriorityBadge, or NotificationBadge and benefits from canonical purpose metadata.
  • The team wants grouped badge presentation to stay aligned across React, Vue, and Svelte through BadgeGroup and one shared contract.

Avoid when

  • The surface is really an interactive chip, filter token, dismissible tag, or pill button rather than a passive badge.
  • The implementation cannot provide truthful surrounding context or an ariaLabel for numeric-only badge content.
  • The team expects a richer color-intent matrix such as the Figma-only brand row that is not currently part of the shipped API.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Badge, BadgeGroup, NotificationBadge, PriorityBadge, StatusBadge

Types

BadgeGroupProps, BadgeProps, NotificationBadgeProps, PriorityBadgeProps, StatusBadgeProps

Enum

BadgeVariant

Vue — @marwes-ui/vue

Components

Badge, BadgeGroup, NotificationBadge, PriorityBadge, StatusBadge

Types

BadgeGroupProps, BadgeProps, NotificationBadgeProps, PriorityBadgeProps, StatusBadgeProps

Enum

BadgeVariant

Svelte — @marwes-ui/svelte

Components

Badge, BadgeGroup, NotificationBadge, PriorityBadge, StatusBadge

Types

BadgeGroupProps, BadgeProps, NotificationBadgeProps, PriorityBadgeProps, StatusBadgeProps

Enum

BadgeVariant

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { BadgeGroup, NotificationBadge, StatusBadge } from "@marwes-ui/react"

export function Example() {
  return (
    <BadgeGroup label="Account status">
      <StatusBadge variant="success">Active</StatusBadge>
      <NotificationBadge variant="info" ariaLabel="3 unread messages">
        3
      </NotificationBadge>
    </BadgeGroup>
  )
}

Vue

<script setup lang="ts">
import { BadgeGroup, NotificationBadge, StatusBadge } from "@marwes-ui/vue"
</script>

<template>
  <BadgeGroup label="Account status">
    <StatusBadge variant="success">Active</StatusBadge>
    <NotificationBadge variant="info" aria-label="3 unread messages">3</NotificationBadge>
  </BadgeGroup>
</template>

Svelte

<script lang="ts">
  import { BadgeGroup, NotificationBadge, StatusBadge } from "@marwes-ui/svelte"
</script>

<BadgeGroup label="Account status">
  <StatusBadge variant="success">Active</StatusBadge>
  <NotificationBadge variant="info" ariaLabel="3 unread messages">3</NotificationBadge>
</BadgeGroup>

Accessibility requirements

  • Truthful label: Keep badge text concise and provide ariaLabel when numeric content needs fuller context.
  • Screen-reader review: Verify grouped badges retain enough visible or surrounding context in the finished product.
  • Manual review boundary: Product-level wording quality for numeric-only notification badges and short status labels.
  • Manual review 2: Whether grouped badges always have enough visible labeling or surrounding context in real layouts.
  • Manual review 3: Any future attempt to grow the family into interactive chips or to ship the current Figma-only brand tone.

Theming

Badge uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources