NotificationCircle

import * as React from "react";
import { NotificationCircle } from "baseui/badge";
import { Skeleton } from "baseui/block";

export default () => {
  return (
    <NotificationCircle content={<Check />}>
      <Skeleton width="90px" height="60px" />
    </NotificationCircle>
  );
}

import * as React from "react";
import { NotificationCircle } from "baseui/badge";
import { Skeleton } from "baseui/block";
export default () => {
  return (
    <NotificationCircle content={<Check />}>
      <Skeleton width="90px" height="60px" />
    </NotificationCircle>
  );
}

API

NotificationCircle is a type of badge. It can be used to display numbers (e.g. the number of notifications or new content). If the supplied number exceeds 9, NotificationCircle displays “9+” instead of going into double digits. It can also display icons to act as an indicator.

Examples

Inline notification circle

Inbox

When placing the NotificationCircle badge inline, avoid icons, as they may cause the badge to be confused with a button.

Offset

Ipsum Lorem

There may be situations where it makes sense to deviate from the standard placement options. Use the offset props to manually position NotificationCircle.

horizontalOffset sets the right CSS attribute when placement is topRight and the left attribute when placement is topLeft.
verticalOffset sets the top CSS attribute.

NotificationCircle exports

You can import this module like so:

import {Badge} from 'baseui/badge'

It exports the following components or utility functions: