NerdfishUI

Indicator

Indicator to indicate a status of a component.

View on GitHub
content
'use client'


import { Indicator, IndicatorItem } from '@nerdfish/ui'


export function IndicatorExample() {
	return (
		<Indicator>
			<IndicatorItem>
				<div className="size-4 rounded-full bg-pink-500" />
			</IndicatorItem>
			<div className="bg-muted grid size-32 place-items-center">content</div>
		</Indicator>
	)
}

Usage

import { Indicator, IndicatorItem, Badge } from '@nerdfish/ui'
<Indicator>
	<IndicatorItem>
		<Badge variant="secondary" />
	</IndicatorItem>
	<div className="bg-inverted text-inverted grid h-32 w-32 place-items-center">
		content
	</div>
</Indicator>

Item

99+
content
'use client'


import { Badge, Indicator, IndicatorItem } from '@nerdfish/ui'


export function IndicatorItemExample() {
	return (
		<Indicator>
			<IndicatorItem>
				<Badge>99+</Badge>
			</IndicatorItem>
			<div className="bg-muted grid size-32 place-items-center">content</div>
		</Indicator>
	)
}

Positions

top left
top center
top right
middle left
middle center
middle right
bottom left
bottom center
bottom right
content
'use client'


import { Badge, Indicator, IndicatorItem } from '@nerdfish/ui'


export function IndicatorPositionsExample() {
	return (
		<Indicator>
			<IndicatorItem top left>
				<Badge>top left</Badge>
			</IndicatorItem>
			<IndicatorItem top center>
				<Badge>top center</Badge>
			</IndicatorItem>
			<IndicatorItem top right>
				<Badge>top right</Badge>
			</IndicatorItem>
			<IndicatorItem middle left>
				<Badge>middle left</Badge>
			</IndicatorItem>
			<IndicatorItem middle center>
				<Badge>middle center</Badge>
			</IndicatorItem>
			<IndicatorItem middle right>
				<Badge>middle right</Badge>
			</IndicatorItem>
			<IndicatorItem bottom left>
				<Badge>bottom left</Badge>
			</IndicatorItem>
			<IndicatorItem bottom center>
				<Badge>bottom center</Badge>
			</IndicatorItem>
			<IndicatorItem bottom right>
				<Badge>bottom right</Badge>
			</IndicatorItem>
			<div className="bg-muted grid size-64 place-items-center">content</div>
		</Indicator>
	)
}