ComponentsIndicator

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="solid">
      <Button aria-label="Notifications" icon={<IconBell />} />
    </Indicator>
  );
}

#

Content

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

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

#

Appearance

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

4
import type { ComponentPropsWithRef } from "react";
 
import { Button, Indicator } from "@optiaxiom/react";
import { IconBell } from "@tabler/icons-react";
 
export function App({
  intent = "success",
  variant = "light",
}: 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.

4
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.

"solid" | "light"

#

Changelog

#

0.1.0

  • Added component
HeadingInput