Indicator

Component

Storybook

Figma Demo

Guidelines

Variations

The indicator is currently offered in a single size (24px) and color combination.

Usage

Indicators are used only to indicate a numerical value, such as the number of unread messages. Currently, this variation is only available in the accent style.

Accessibility

N/A

Content

Content inside the indicator should be numerals only. If other characters are needed, consider our Badge component.

Component Specs

API

• class: string | Default: undefined
  Class of the indicator.

• label: string | number | undefined | Default: 'Indicator'
  Label of the indicator.

• place:
  'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | Default: 'top-right'
  Placement of the indicator.

• offset: boolean | Default: true
  Offset of the indicator.

• testId: string | Default: undefined
  Test id of the indicator.

Example

<script>
	import { Button, Indicator } from '@getprovi/craft-svelte';
	import { BellSolid } from '@getprovi/craft-svelte-icons';
</script>

<!-- Can be used with a relative container, but is usually used with a button -->

<button indicator="4" iconOnly iconName="{BellSolid}" />

<div class="relative h-96 w-96">
	<Indicator label="4" testId="test-notification" place="top-center" />
</div>

Types

export type IndicatorPlacementType =
	| 'top-left'
	| 'top-center'
	| 'top-right'
	| 'center-left'
	| 'center'
	| 'center-right'
	| 'bottom-left'
	| 'bottom-center'
	| 'bottom-right';

interface Props {
	class?: string | null | undefined;
	label: string | number | undefined;
	offset?: boolean;
	place?: IndicatorPlacementType;
	testId?: string | undefined;
}