Indicator

Display a badge at the corner of another element.

#
Documentation

#
Usage


import { Button, Indicator } from "@optiaxiom/react";
import { IconBell } from "@tabler/icons-react";
 
export function App() {
  return (
    <Indicator intent="danger" variant="strong">
      <Button aria-label="Notifications" icon={<IconBell />} />
    </Indicator>
  );
}

#
Content

Use the content prop to set the content of the badge.


import { Button, Indicator } from "@optiaxiom/react";
import { IconBell } from "@tabler/icons-react";
 
export function App() {
  return (
    <Indicator content="4" intent="danger" variant="strong">
      <Button aria-label="Notifications" icon={<IconBell />} />
    </Indicator>
  );
}

#
Appearance

Use the intent and variant props to fine tune the appearance of the badge.

Intent

Variant


import type { ComponentPropsWithRef } from "react";
 
import { Button, Indicator } from "@optiaxiom/react";
import { IconBell } from "@tabler/icons-react";
 
export function App({
  intent = "success",
  variant = "subtle",
}: Pick<ComponentPropsWithRef<typeof Indicator>, "intent" | "variant">) {
  return (
    <Indicator content="4" intent={intent} variant={variant}>
      <Button aria-label="Notifications" icon={<IconBell />} />
    </Indicator>
  );
}

#
Hide indicator

Use the disabled prop to hide the badge.

Disabled


import type { ComponentPropsWithRef } from "react";
 
import { Button, Indicator } from "@optiaxiom/react";
import { IconBell } from "@tabler/icons-react";
 
export function App({
  disabled = false,
}: Pick<ComponentPropsWithRef<typeof Indicator>, "disabled">) {
  return (
    <Indicator content="4" disabled={disabled} intent="danger">
      <Button aria-label="Notifications" icon={<IconBell />} />
    </Indicator>
  );
}

#
Props

#
Indicator

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`content` Set the content of the badge. `ReactNode`
`disabled` Whether to show or hide badge. `false \| true`
`intent` Control the appearance by selecting between the different badge types. `"information" \| "success" \| "warning" \| "danger" \| "neutral" \| "primary"`
`lineClamp` Truncate the text at specific number of lines. `"1" \| "2" \| "3" \| "4"`
`offset` Whether to offset the badge and display slightly outside the content box. `false \| true` Default: `true`
`ping` Whether to show a ping animation for the badge. `false \| true`
`position` Set which corner the badge is displayed. `"bottom-right" \| "top-right"` Default: `top-right`
`truncate` Whether to truncate the text and add an ellipsis at the end. `false \| true`
`variant` Control the style of the badge. `"strong" \| "subtle"`

#
Changelog

#
0.1.0

Added component