Tessina UI
Tessina UI
GitHubIntroduction
InstallationUsageTheming
Components
ButtonIconButtonLinkSpinnerBadgeAvatarStatusChipShortcutSkeletonSurfaceProgressMeterRating
LabelFieldFieldsetCheckboxRadioSwitchSliderSelectComboboxSearchTextareaNumberFieldDate PickerTime PickerOTP InputFile UploadCalendar
AlertBannerToastTooltip
TabsAccordionCollapsibleBreadcrumbPaginationStepperSegmentedControlButtonGroupToggleButtonToggleGroupToolbarNavigation MenuMenubarBottom NavSidebar
Split ButtonFABDropdown MenuContextMenuCommandPopoverHoverCard
ContainerStackFlexGridAspectRatioSpacerCardCarouselDividerScroll Area
Table
ChatBubblePromptInputCodeBlock
ModalAlertDialogDrawerAction SheetTop Header MobileTop Header DesktopEmptyStateForm
Contributing
ComponentsEssentials

Status

A small circular status indicator for user presence (online, away, busy, neutral) and feedback states (success, info, warning, error). Five sizes from 8 px to 24 px. Used as a standalone badge or embedded inside Avatar.

Playground

Showcase

All variants and sizes:

Installation

pnpm add @tessinaui/ui

Usage

import { Status } from "@tessinaui/ui";
<Status variant="online" size="md" />
<Status variant="success" size="lg" />
<Status variant="error" size="xl" />

API Reference

Props

PropTypeDefaultDescription
variant"online" | "away" | "busy" | "neutral" | "success" | "info" | "warning" | "error""online"Controls background color and icon
size"xs" | "sm" | "md" | "lg" | "xl""md"Outer circle diameter: 8 / 12 / 16 / 20 / 24 px
showIconbooleanautoOverride icon visibility. By default icons show for feedback variants (success/info/warning/error) at sm+, and are hidden for presence variants and xs size
classNamestring—Extra classes for the outer <span>

All native <span> attributes are forwarded.

Variants

Presence states — plain colored dots (no icon):

  • online → green (bg-success)
  • away → yellow (bg-warning)
  • busy → red (bg-error)
  • neutral → grey (bg-secondary)

Feedback states — show an icon at sm and above:

  • success → green with checkmark
  • info → blue with info icon
  • warning → yellow with triangle
  • error → red with ✕

Sizes

SizeDiameterUsed with Avatar size
xs8 pxxs / sm (20–24 px)
sm12 pxmd (32 px)
md16 pxlg (40 px)
lg20 pxxl (56 px)
xl24 px2xl (64 px)

Accessibility

  • Renders as <span role="img" aria-label="{variant}"> so screen readers announce the status
  • Inner icon SVGs are aria-hidden

Avatar

A circular (or rounded) user avatar that displays a profile image, 1–2 character initials, or a fallback icon. Supports six sizes, six initials color variants, an optional Status dot at any corner, full RTL layout, and an AvatarGroup for stacking.

Chip

Interactive label pills for filtering, tagging, and selection. Four variants, five intents, five sizes, six rounded options, optional remove button, leading icon/avatar/status slots, and RTL support.

On this page

PlaygroundShowcaseInstallationUsageAPI ReferencePropsVariantsSizesAccessibility