Indicator

A indicator-badges is a small, visual element or indicator used in user interface design. They serve various purposes, including highlighting new or unread content, indicating the number of notifications.

Basic

Absolute positioning

Indicator will be positioned absolute if Indicator have children element.

Source Code

import { NotificationOutline } from '@ocean-network-express/magenta-ui/icons';
import { Avatar, IconButton, Indicator } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function AbsolutePositioning() {
  return (
    <div className={'flex gap-20'}>
      <Indicator>
        <IconButton variant={'outline'} color={'neutral'} size={'lg'}>
          <NotificationOutline />
        </IconButton>
      </Indicator>

Standalone

Indicator will be positioned initial if Indicator do not have children element.

Source Code

import { Indicator } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Standalone() {
  return (
    <div className="flex gap-20">
      <Indicator />

      <Indicator label={'99'} />
    </div>
  );
}

Variants

Button supports 2 variants: light and bold.
Default variant is light.

Source Code

import { NotificationOutline } from '@ocean-network-express/magenta-ui/icons';
import { Divider, IconButton, Indicator } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Variants() {
  return (
    <div style={{ display: 'flex', gap: '24px', flexDirection: 'column' }}>
      <div className="flex gap-20">
        <Indicator variant={'light'} label={'99'}>
          <IconButton variant={'outline'} color={'neutral'}>
            <NotificationOutline />
          </IconButton>

Offset

Set offset to change indicator position. It is useful when Indicator component is used with children that have border-radius.

Source Code

import { NotificationOutline } from '@ocean-network-express/magenta-ui/icons';
import { Avatar, IconButton, Indicator } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Offset() {
  return (
    <div className="flex gap-20">
      <Indicator offset={2}>
        <IconButton color={'neutral'} size={'lg'}>
          <NotificationOutline />
        </IconButton>
      </Indicator>

Sizes

Indicator supports 4 sizes xs, sm, md and lg and can be changed by passing the size prop.
Default size is lg.
When using xs size, Label WILL NOT rendered inside the indicator.

Source Code

import { NotificationOutline } from '@ocean-network-express/magenta-ui/icons';
import { Divider, IconButton, Indicator } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', gap: '24px', flexDirection: 'column' }}>
      <div className="flex gap-20">
        <Indicator label={'99'} size={'lg'}>
          <IconButton>
            <NotificationOutline />
          </IconButton>

Customize

Indicator in Tabs

Source Code

import {
  TrainFrontOutline,
  TruckFrontOutline,
  VesselFrontOutline,
} from '@ocean-network-express/magenta-ui/icons';
import {
  Indicator,
  TabHeader,
  TabList,
  TabListItem,
  TabPanel,
  TabPanels,

Indicator in Segmented control

Source Code

import { Indicator, Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function CustomizeSegmented() {
  return (
    <Segmented>
      <SegmentedItem>
        All <Indicator label={'23'} />
      </SegmentedItem>
      <SegmentedItem>Unread</SegmentedItem>
      <SegmentedItem>
        Starred <Indicator label={'12'} />

Badge

Text Only

Set text to true to display a text-only badge using the label prop.
By default, the text prop is false.

Light:

Label

Bold:

Label

Source Code

import { Divider, Indicator, IndicatorProps, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

const listColorLabels: IndicatorProps['color'][] = [
  'neutral',
  'primary',
  'secondary',
  'blue',
  'green',
  'orange',
  'red',
  'purple',

Icon and Text

You can pass any icon from @ocean-network-express/magenta-ui/icons (or any other ReactNode) to the leftIcon or rightIcon prop to display an icon alongside the label.
The leftIcon and rightIcon props are only rendered when the text prop is set to true.

Light:

Label

Bold:

Label

Source Code

import { VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { Divider, Indicator, IndicatorProps, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

const listColorLabels: IndicatorProps['color'][] = [
  'neutral',
  'primary',
  'secondary',
  'blue',
  'green',
  'orange',
  'red',

Was this page helpful?