@redis-ui/components 42.8.0 → 43.2.1

package/skills/redis-ui-components/references/Loader.md

@@ -0,0 +1,100 @@
+# Loader
+
+A visual loading indicator with optional text, inline layout, and variant-based coloring.
+
+## Import
+
+```tsx
+import { Loader } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | `string` | theme default | Custom loader size |
+| inline | `boolean` | `false` | Renders the loader inline with surrounding content |
+| loaderText | `string` | - | Text shown next to the loader |
+| dataTestId | `string` | - | Deprecated test id for the SVG element |
+| variant | `LoaderVariants` | `regular` | Visual color variant |
+| other div props | `React.HTMLAttributes<HTMLDivElement>` | - | Standard container props forwarded to the loader wrapper |
+
+### `LoaderVariants`
+
+`'regular' | 'pending' | 'inverse'`
+
+## Examples
+
+### Playground
+
+```tsx
+import { Loader } from '@redislabsdev/redis-ui-components';
+
+<Loader size="5rem" inline={false} loaderText="" variant="regular" />
+```
+
+### CustomSize
+
+> Loaders can have a custom size by providing a value to the `size` prop. If you do not provide a value to the `size` prop, the size of the loader will be set to `5rem`.
+
+```tsx
+import { Loader } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Loader size="3rem" />
+  <Loader />
+  <Loader size="7rem" />
+</>
+```
+
+### WithText
+
+> Provide `loaderText` to show text below the loader.
+
+```tsx
+import { Loader } from '@redislabsdev/redis-ui-components';
+
+<Loader loaderText="Loader Text" />
+```
+
+### Inline
+
+> Set `inline` to `true` to place the loader alongside surrounding text.
+
+```tsx
+import { Loader } from '@redislabsdev/redis-ui-components';
+
+<>
+  <span>
+    Hello, all loader learners. This is an example of text with an inline loader:{' '}
+    <Loader inline /> This loader is displayed inline.
+  </span>
+  <Loader />
+</>
+```
+
+### Variants
+
+> The `variant` prop changes the loader and loader text color. The inverse variant is shown on a dark background.
+
+```tsx
+import { Loader } from '@redislabsdev/redis-ui-components';
+import { theme } from '@redislabsdev/redis-ui-styles';
+
+const inverseBackground = theme.semantic.color.icon.neutral500;
+
+<>
+  <Loader variant="regular" loaderText="Regular Loader Text" />
+  <Loader variant="pending" loaderText="Pending Loader Text" />
+  <div style={{ backgroundColor: inverseBackground }}>
+    <Loader variant="inverse" loaderText="Inverse Loader Text" />
+  </div>
+</>
+```
+
+## Notes
+
+- `size` falls back to the theme default when omitted.
+- `loaderText` replaces the hidden accessibility label.
+- `inline` changes the layout but not the loading semantics.
+- `dataTestId` is deprecated; use `data-testid` instead.