Loader

import { Loader } from "@/components";

👉 View in Storybook

---

Usage

Basic Loader

<Loader loading={true} size="md" />

Loader with Text

<Loader loading={true} size="md" text="Loading data..." />

Small and Large Loaders

<Loader loading={true} size="sm" text="Small Loader" />
<Loader loading={true} size="lg" text="Large Loader" />

Conditional Rendering

The Loader will not render if loading is set to false:

<Loader loading={false} />

---

Props

Prop	Type	Default	Description
loading	boolean	false	Controls whether the loader is visible.
text	string (optional)	undefined	Text displayed beside the loader icon.
icon	string (optional)	"tawuniya-small"	Icon displayed inside the loader.
size	"sm" | "md" | "lg" (from loaderVariants)	"md"	Defines the size of the loader.
className	string (optional)	undefined	Custom Tailwind CSS classes to override default styles.

---

Usage

Basic Loader

<Loader loading={true} size="md" />

Loader with Text

<Loader loading={true} size="md" text="Loading data..." />

Custom Icon

<Loader
  loading={true}
  size="md"
  icon="custom-loader-icon"
  text="Loading data..."
/>