Indicator Component

ℹ️

The Indicator component provides a flexible way to create indicator elements, each of which can be customized using the Indicator.Item sub-component. It supports various colors, positions, and additional styling through className. This component is inspired by the DaisyUI (opens in a new tab) framework's design for loading indicators.

Example Preview

Indicator Example

Usage

import { Indicator } from "@/lib/utils";
 
// Render Indicator component with Indicator.Item sub-component
const MyIndicatorComponent = () => {
  return (
    <Indicator>
      <Indicator.Item color="primary" horizontal="left" vertical="top">
        1
      </Indicator.Item>
      <Indicator.Item color="warning" horizontal="right" vertical="bottom">
        2
      </Indicator.Item>
      <Indicator.Item color="success" horizontal="center" vertical="middle">
        3
      </Indicator.Item>
    </Indicator>
  );
};
 
export default MyIndicatorComponent;

Props

Indicator

Prop name	Type	Default value	Required	Description
`children`	`ReactNode`	-	Yes	Content to display within the indicator.
`className`	`string`	-	No	Additional CSS class names for styling.

ℹ️

Note: The Indicator component accepts additional HTML attributes (HTMLAttributes<HTMLDivElement>).

Indicator.Item

Prop name	Type	Default value	Required	Description
`children`	`ReactNode`	-	Yes	Content to display within the indicator item.
`color`	`colors`	`'secondary'`	No	Color of the indicator item. Available colors: `'primary'`, `'secondary'`, `'accent'`, `'neutral'`, `'success'`, `'warning'`, `'error'`, `'info'`.
`horizontal`	`'left'`, `'right'`, `'center'`	`'right'`	No	Horizontal position of the indicator item.
`vertical`	`'top'`, `'bottom'`, `'middle'`	`'top'`	No	Vertical position of the indicator item.
`className`	`string`	-	No	Additional CSS class names for styling.

ℹ️

Note: The Indicator.Item component accepts additional HTML attributes (HTMLAttributes<HTMLDivElement>).

Example

Here is an example of using the Indicator component with Indicator.Item sub-components:

<Indicator>
  <Indicator.Item color="primary" horizontal="left" vertical="top">
    1
  </Indicator.Item>
  <Indicator.Item color="warning" horizontal="right" vertical="bottom">
    2
  </Indicator.Item>
  <Indicator.Item color="success" horizontal="center" vertical="middle">
    3
  </Indicator.Item>
</Indicator>

This will render an indicator with three items, each with different colors and positions. You can customize the content, colors, and positions as needed.

ℹ️

Note: The Indicator component is a versatile React component designed to display various loading indicators, providing a visually pleasing and user-friendly experience during content loading. With customizable styles and animations, you can easily integrate this component to enhance your project's loading states. This component is inspired by the DaisyUI (opens in a new tab) framework's design for loading indicators. Check it out for more awesome components.

Icon Kbd