Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Indicator
Highlight Text

A text enhancement component that highlights matching words or important content.

Input

A flexible and accessible input field for text-based user input.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Indicator

A badge-like component that indicates status, alerts, or notifications on top of other UI elements.

Usage

Basic usage example to quickly see how the Indicator works.

import Image from "next/image";
import { Indicator } from "@/ui/indicator";

export function IndicatorDemo() {
  return (
    <Indicator withBorder processing color="white">
      <Image unoptimized alt="" height="60" width="60" src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Jude" className="rounded-md" />
    </Indicator>
  );
}

Properties

Interactive configurator to explore customization options for the Indicator component.

Size
Offset
Color
import { Indicator } from "@/ui/indicator";
import { Avatar } from "@/ui/avatar";

export function IndicatorDemo() {
  return (
    <Indicator>
      <Avatar unoptimized alt="" size="60" src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Rudy" className="rounded-md" />
    </Indicator>
  );
}

API References

Styles API

type T = "root" | "indicator";
type Unstyled = boolean | Partial<Record<__Selector, boolean>>;
Styles APITypeDefaultAnnotation
unstyled?Unstyledundefinedif true, all default styles will be removed
className?stringundefinedpass to root component <div>
style?CSSProperties & Record<string, any>undefinedpass to root component <div>
classNames?Partial<Record<T, string>>undefinedpass to root component <div>
styles?Partial<Record<T, CSSProperties>>undefinedpass to root component <div>
color?CSSProperties["color"]undefinedDetermines to indicator color
size?number | string10Indicator width and height
round?string | number999Key of valid CSS value to set border-radius

Props API

Props APITypeDefaultAnnotation
position?IndicatorPosition"top-end"Indicator position relative to the target element
offset?numberequals to sizeIndicator offset relative to the target element, usually used for elements with border-radius
inline?booleanfalseDetermines whether the indicator container should be an inline element
label?ReactNodeundefinedLabel rendered inside the indicator, for example, notification count
withBorder?booleanfalseDetermines whether the indicator should have a border (color of the border is the same as the body)
disabled?booleanfalseWhen Indicator is disabled it renders children only
processing?booleanfalseDetermines whether the indicator should have processing animation

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

indicator.tsx
globals.css
/* indicator */ @keyframes processing { from { opacity: 0.6; transform: scale(0); } to { opacity: 0; transform: scale(2.8); } }