> ## Documentation Index > Fetch the complete documentation index at: https://na-36-handover-docs-v2-into-docs-v2-dev-20260518.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Elements > Standalone visual atoms – icons, text, links, callouts, math, spacing, images. **Generation Script**: This file is generated from script(s): `operations/scripts/generators/components/documentation/generate-component-docs.js`.
**Purpose**: Generated component-library MDX pages derived from docs-guide/config/component-registry.json.
**Run when**: Component governance metadata, registry outputs, or published component-library templates change.
**Important**: Do not manually edit this file; run `node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category elements`.
Return to the generated component library landing page. ## Elements Standalone visual atoms – icons, text, links, callouts, math, spacing, images. This category currently contains **32** governed export(s). ### Decision Tree Excerpt 1. Fetches, embeds, or binds to external/third-party data? → `integrators/` 2. Part of the page's outer structure, typically used once? → `scaffolding/` 3. Takes content and presents it in a formatted way? → `displays/` 4. Exists to hold, group, or arrange other things? → `wrappers/` 5. Single visual piece – no wrapping, no arranging, no fetching? → `elements/` ### Summary Table | Component | Status | Import path | Description | | ---------------------- | ------------ | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | AccordionTitle | `stable` | `/snippets/components/elements/text/Text.jsx` | Accordion title with icon, name, and optional description subtitle. Wraps CustomCardTitle with an italic description line underneath. | | AddressLinks | `stable` | `/snippets/components/elements/links/Links.jsx` | Copyable contract address with blockchain explorer and GitHub links. | | ArbitrumIcon | `stable` | `/snippets/components/elements/icons/Icons.jsx` | Arbitrum logo rendered identically to Mintlify FA icons using mask-image technique. | | ArbitrumSVG | `stable` | `/snippets/components/elements/icons/Icons.jsx` | Inline Arbitrum logo as SVG with currentColor fill. | | BlinkingIcon | `stable` | `/snippets/components/elements/icons/Icons.jsx` | Animated icon with pulsing opacity. Respects prefers-reduced-motion. | | CardTitleTextWithArrow | `stable` | `/snippets/components/elements/text/Text.jsx` | Card title with trailing arrow icon for navigation indication. | | ComingSoonCallout | `deprecated` | `/snippets/components/elements/callouts/Callouts.jsx` | Banner indicating a feature or page is coming soon. Deprecated wrapper around StatusCallout. | | CopyText | `stable` | `/snippets/components/elements/text/Text.jsx` | Text with a click-to-copy button that copies content to clipboard. | | CustomCallout | `deprecated` | `/snippets/components/elements/callouts/Callouts.jsx` | Styled callout box. Deprecated alias for IconCallout. | | CustomCardTitle | `stable` | `/snippets/components/elements/text/Text.jsx` | Title row with icon and text, using flexbox alignment. Accepts Font Awesome strings or React components as icon. Variant prop controls styling context. | | DataWrap | `stable` | `/snippets/components/elements/text/DataWrap.jsx` | Transparent wrapper that renders a data value inline. Used to surface pipeline-generated values (e.g. lastVerified dates) in MDX without additional markup. | | DoubleIconLink | `stable` | `/snippets/components/elements/links/Links.jsx` | Inline link with icons on both sides. | | DownloadButton | `stable` | `/snippets/components/elements/buttons/Buttons.jsx` | Lazy-loaded download button with icon that renders on viewport intersection. | | ExternalLinkButton | `stable` | `/snippets/components/elements/buttons/Buttons.jsx` | Icon button that opens an external link in a new tab. Bordered with rounded corners, hover colour transition. | | FocusableScrollRegions | `stable` | `/snippets/components/elements/a11y/FocusableScrollRegion.jsx` | Makes scroll regions keyboard-focusable by adding tabindex to matching selectors. | | GotoCard | `stable` | `/snippets/components/elements/links/Links.jsx` | Card-style navigation link wrapping Mintlify Card component. | | GotoLink | `stable` | `/snippets/components/elements/links/Links.jsx` | Inline navigation link with icon prefix and label. | | IconCallout | `stable` | `/snippets/components/elements/callouts/Callouts.jsx` | Styled callout box with icon, custom colour, and optional corner arrow indicator. | | Image | `stable` | `/snippets/components/elements/images/Image.jsx` | Framed image with optional caption and full-width toggle. | | InlineDivider | `stable` | `/snippets/components/elements/spacing/Divider.jsx` | Lightweight horizontal rule with controllable margin, padding, colour, and opacity. Use inside accordions, steps, or anywhere markdown `---` gives no spacing control. | | LinkArrow | `stable` | `/snippets/components/elements/links/Links.jsx` | External link with arrow icon, optional description, and line break control. | | LinkIcon | `stable` | `/snippets/components/elements/links/Links.jsx` | Wraps a Mintlify Icon in an anchor tag. Strips default Mintlify link styling (border-bottom). | | LinkImage | `stable` | `/snippets/components/elements/images/Image.jsx` | Clickable framed image that opens a URL in a new tab. | | LivepeerSVG | `stable` | `/snippets/components/elements/icons/Icons.jsx` | Inline Livepeer logo as SVG with currentColor fill. | | MathBlock | `stable` | `/snippets/components/elements/math/Math.jsx` | Renders LaTeX as a block-level math expression using KaTeX. | | MathInline | `stable` | `/snippets/components/elements/math/Math.jsx` | Renders LaTeX as inline math using KaTeX. | | PreviewCallout | `deprecated` | `/snippets/components/elements/callouts/Callouts.jsx` | Banner indicating content is in preview state. Deprecated wrapper around StatusCallout. | | ReviewCallout | `stable` | `/snippets/components/elements/callouts/Callouts.jsx` | Banner indicating content is under technical review. | | SocialLinks | `stable` | `/snippets/components/elements/links/Links.jsx` | Row of icon-only social media links with tooltips and aria-labels. Pass a links array to customise per product; omit for Livepeer defaults. | | Spacer | `stable` | `/snippets/components/elements/spacing/Divider.jsx` | Empty spacer div with configurable size and direction. | | StatusCallout | `stable` | `/snippets/components/elements/callouts/Callouts.jsx` | Banner indicating page/feature status (coming soon or preview) with feedback links. | | TipWithArrow | `deprecated` | `/snippets/components/elements/callouts/Callouts.jsx` | Callout with arrow. Deprecated wrapper around IconCallout. | ## Component Reference ### AccordionTitle Use **AccordionTitle** when you need accordion title with icon, name, and optional description subtitle. Wraps CustomCardTitle with an italic description line underneath.. Source description: Accordion title with icon, name, and optional description subtitle. Wraps CustomCardTitle with an italic description line underneath. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { AccordionTitle } from '/snippets/components/elements/text/Text.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `icon` | `string\|React.ReactNode` | ``| Yes | Font Awesome icon name (string) or React component. | | `title` | `React.ReactNode` |`` | Yes | Title text. | \| `description` | `React.ReactNode` | \`\` | No | Optional subtitle shown below the title in italic. | \| `descriptionColor` | `string` | `"var(--lp-color-text-secondary)"` | No | Description text colour. | \| `descriptionSize` | `string` | `"0.85em"` | No | Description font size. | \| `style` | `object` | `{}` | No | Inline style overrides on the wrapper. | \| `className` | `string` | `""` | No | CSS class name. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### AddressLinks Use **AddressLinks** when you need copyable contract address with blockchain explorer and GitHub links.. Source description: Copyable contract address with blockchain explorer and GitHub links. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { AddressLinks } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `address` | `string` | ``| Yes | Contract address to display and copy. | | `blockchainHref` | `string` |`` | No | Blockchain explorer URL (e.g. Arbiscan). | \| `githubHref` | `string` | \`\` | No | GitHub source URL. | \| `style` | `object` | `{}` | No | Inline style overrides. | \| `className` | `string` | `""` | No | CSS class name. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### ArbitrumIcon Use **ArbitrumIcon** when you need arbitrum logo rendered identically to Mintlify FA icons using mask-image technique.. Source description: Arbitrum logo rendered identically to Mintlify FA icons using mask-image technique. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { ArbitrumIcon } from '/snippets/components/elements/icons/Icons.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `size` | `number` | `16` | No | Icon size in pixels. | \| `color` | `string` | \`\` | No | Override colour. Accepts CSS values including var() custom properties. Default is theme-aware (dark in light mode, light in dark mode). | \| `style` | `object` | `{}` | No | Inline style overrides. | \| `className` | `string` | `""` | No | CSS class name. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### ArbitrumSVG Use **ArbitrumSVG** when you need inline Arbitrum logo as SVG with currentColor fill.. Source description: Inline Arbitrum logo as SVG with currentColor fill. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { ArbitrumSVG } from '/snippets/components/elements/icons/Icons.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `size` | `number` | `24` | No | size prop. | \| `props` | `any` | \`\` | Yes | props prop. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### BlinkingIcon Use **BlinkingIcon** when you need animated icon with pulsing opacity. Respects prefers-reduced-motion.. Source description: Animated icon with pulsing opacity. Respects prefers-reduced-motion. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { BlinkingIcon } from '/snippets/components/elements/icons/Icons.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `icon` | `string` | `"terminal"` | No | Icon name to display | \| `size` | `number` | `16` | No | Size of the icon in pixels | \| `color` | `string` | \`\` | Yes | Color of the icon (defaults to theme accent) | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### CardTitleTextWithArrow Use **CardTitleTextWithArrow** when you need card title with trailing arrow icon for navigation indication.. Source description: Card title with trailing arrow icon for navigation indication. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { CardTitleTextWithArrow } from '/snippets/components/elements/text/Text.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `children` | `any` | ``| Yes | children prop. | | `cardProps` | `any` |`` | Yes | card Props prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} Example content ``` ### ComingSoonCallout Use **ComingSoonCallout** when you need banner indicating a feature or page is coming soon. Deprecated wrapper around StatusCallout.. Source description: Banner indicating a feature or page is coming soon. Deprecated wrapper around StatusCallout. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { ComingSoonCallout } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `deprecated` * Accepts: `none` * Data source: `none` Deprecation note: Use StatusCallout with variant="coming-soon" instead. See `StatusCallout`. **Props** No documented props. ### CopyText Use **CopyText** when you need text with a click-to-copy button that copies content to clipboard.. Source description: Text with a click-to-copy button that copies content to clipboard. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { CopyText } from '/snippets/components/elements/text/Text.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `text` | `any` | ``| Yes | text prop. | | `label` | `any` |`` | Yes | label prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### CustomCallout Use **CustomCallout** when you need styled callout box. Deprecated alias for IconCallout.. Source description: Styled callout box. Deprecated alias for IconCallout. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { CustomCallout } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `deprecated` * Accepts: `none` * Data source: `none` Deprecation note: Use IconCallout instead. See `IconCallout`. **Props** No documented props. ### CustomCardTitle Use **CustomCardTitle** when you need title row with icon and text, using flexbox alignment. Accepts Font Awesome strings or React components as icon. Variant prop controls styling context.. Source description: Title row with icon and text, using flexbox alignment. Accepts Font Awesome strings or React components as icon. Variant prop controls styling context. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { CustomCardTitle } from '/snippets/components/elements/text/Text.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `icon` | `string\|React.ReactNode` | ``| Yes | Font Awesome icon name (string) or React component (e.g. ArbitrumIcon). | | `title` | `React.ReactNode` |`` | Yes | Title text rendered by the component. | \| `variant` | `string` | `"card"` | No | Styling context: "card" (default, opinionated), "accordion" (inline, inherits parent styles), "tab" (inline, smaller). | \| `iconSize` | `number` | \`\` | No | Icon size in pixels (applies to Font Awesome icons only). Defaults per variant: card=20, accordion=18, tab=14. | \| `style` | `object` | `{}` | No | Inline style overrides. | \| `className` | `string` | `""` | No | CSS class name. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### DataWrap Use **DataWrap** when you need transparent wrapper that renders a data value inline. Used to surface pipeline-generated values (e.g. lastVerified dates) in MDX without additional markup.. Source description: Transparent wrapper that renders a data value inline. Used to surface pipeline-generated values (e.g. lastVerified dates) in MDX without additional markup. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { DataWrap } from '/snippets/components/elements/text/DataWrap.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `prop` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `value` | `string\|number` | \`\` | Yes | The data value to render. | ### DoubleIconLink Use **DoubleIconLink** when you need inline link with icons on both sides.. Source description: Inline link with icons on both sides. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { DoubleIconLink } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `label` | `string` | `""` | No | Link text/label | \| `href` | `string` | `"#"` | No | Link URL | \| `text` | `string` | `""` | No | Optional text to display before the link | \| `iconLeft` | `string` | `"github"` | No | Icon to display on the left | \| `iconRight` | `string` | `"arrow-up-right"` | No | Icon to display on the right | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### DownloadButton Use **DownloadButton** when you need lazy-loaded download button with icon that renders on viewport intersection.. Source description: Lazy-loaded download button with icon that renders on viewport intersection. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { DownloadButton } from '/snippets/components/elements/buttons/Buttons.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `label` | `string` | `'Download'` | No | label prop. | \| `icon` | `string` | `'download'` | No | icon prop. | \| `downloadLink` | `any` | \`\` | Yes | download Link prop. | \| `rightIcon` | `string` | `''` | No | right Icon prop. | \| `border` | `boolean` | `false` | No | border prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### ExternalLinkButton Use **ExternalLinkButton** when you need icon button that opens an external link in a new tab. Bordered with rounded corners, hover colour transition.. Source description: Icon button that opens an external link in a new tab. Bordered with rounded corners, hover colour transition. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { ExternalLinkButton } from '/snippets/components/elements/buttons/Buttons.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `href` | `string` | \`\` | Yes | URL to open on click. | \| `icon` | `string` | `'arrow-up-right'` | No | Icon name to display. | \| `size` | `number` | `14` | No | Icon size in pixels. | \| `ariaLabel` | `string` | `'Open external link'` | No | Accessible label. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### FocusableScrollRegions Use **FocusableScrollRegions** when you need makes scroll regions keyboard-focusable by adding tabindex to matching selectors.. Source description: Makes scroll regions keyboard-focusable by adding tabindex to matching selectors. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { FocusableScrollRegions } from '/snippets/components/elements/a11y/FocusableScrollRegion.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `selectors` | `any` | \`\` | Yes | selectors prop. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### GotoCard Use **GotoCard** when you need card-style navigation link wrapping Mintlify Card component.. Source description: Card-style navigation link wrapping Mintlify Card component. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { GotoCard } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `label` | `string` | ``| Yes | Card title | | `relativePath` | `string` |`` | Yes | Relative URL path | \| `icon` | `string` | ``| Yes | Icon to display (defaults to "arrow-turn-down-right") | | `text` | `React.ReactNode` |`` | Yes | Card content | \| `cta` | `string` | `""` | No | Call-to-action button text | \| `props` | `any` | \`\` | Yes | props prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### GotoLink Use **GotoLink** when you need inline navigation link with icon prefix and label.. Source description: Inline navigation link with icon prefix and label. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { GotoLink } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `label` | `string` | ``| Yes | Link text/label | | `relativePath` | `string` |`` | Yes | Relative URL path | \| `text` | `string` | `""` | No | Optional text to display before the link | \| `icon` | `string` | `"arrow-turn-down-right"` | No | Icon to display | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### IconCallout Use **IconCallout** when you need styled callout box with icon, custom colour, and optional corner arrow indicator.. Source description: Styled callout box with icon, custom colour, and optional corner arrow indicator. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { IconCallout } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `children` | `React.ReactNode` | ``| Yes | Content to display in the callout. | | `icon` | `string` | `"lightbulb"` | No | Icon name to display. | | `color` | `string` |`` | Yes | Primary colour for icon, border, and background (defaults to theme accent). | \| `iconSize` | `number` | `16` | No | Size of the main icon in pixels. | \| `textSize` | `string` | `"0.875rem"` | No | Font size for the text content. | \| `textColor` | `string` | \`\` | Yes | Text colour (defaults to match icon colour). | \| `showArrow` | `boolean` | `false` | No | Show an arrow icon in the top-right corner. | \| `arrowIcon` | `string` | `"arrow-up-right"` | No | Arrow icon name (when showArrow is true). | \| `arrowSize` | `number` | `16` | No | Size of the arrow icon in pixels. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} Tip content here Linked tip content ``` ### Image Use **Image** when you need framed image with optional caption and full-width toggle.. Source description: Framed image with optional caption and full-width toggle. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { Image } from '/snippets/components/elements/images/Image.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `src` | `any` | ``| Yes | src prop. | | `alt` | `any` |`` | Yes | alt prop. | \| `caption` | `any` | ``| Yes | caption prop. | | `icon` | `any` |`` | Yes | icon prop. | \| `hint` | `any` | \`\` | Yes | hint prop. | \| `fullwidth` | `boolean` | `true` | No | fullwidth prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} example ``` ### InlineDivider Use **InlineDivider** when you need lightweight horizontal rule with controllable margin, padding, colour, and opacity. Use inside accordions, steps, or anywhere markdown `---` gives no spacing control.. Source description: Lightweight horizontal rule with controllable margin, padding, colour, and opacity. Use inside accordions, steps, or anywhere markdown `---` gives no spacing control. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { InlineDivider } from '/snippets/components/elements/spacing/Divider.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `margin` | `string` | `"0.75rem 0"` | No | Margin around the divider. | \| `padding` | `string` | `"0"` | No | Padding around the divider. | \| `color` | `string` | `"var(--lp-color-border-default)"` | No | Line colour. | \| `opacity` | `number` | `0.4` | No | Line opacity. | \| `height` | `string` | `"1px"` | No | Line thickness. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### LinkArrow Use **LinkArrow** when you need external link with arrow icon, optional description, and line break control.. Source description: External link with arrow icon, optional description, and line break control. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { LinkArrow } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `href` | `any` | ``| Yes | href prop. | | `label` | `any` |`` | Yes | label prop. | \| `description` | `any` | ``| Yes | description prop. | | `newline` | `boolean` | `true` | No | newline prop. | | `borderColor` | `any` |`` | Yes | border Color prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### LinkIcon Use **LinkIcon** when you need wraps a Mintlify Icon in an anchor tag. Strips default Mintlify link styling (border-bottom).. Source description: Wraps a Mintlify Icon in an anchor tag. Strips default Mintlify link styling (border-bottom). **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { LinkIcon } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `href` | `string` | ``| Yes | Link destination URL. | | `icon` | `string` | `"arrow-up-right-from-square"` | No | Font Awesome icon name. | | `size` | `number` | `14` | No | Icon size in pixels. | | `color` | `string` |`` | No | Icon colour override. | \| `target` | `string` | `"_blank"` | No | Link target. | \| `rel` | `string` | `"noopener noreferrer"` | No | Link rel attribute. | \| `style` | `object` | `{}` | No | Inline style overrides. | \| `className` | `string` | `""` | No | CSS class name. | ### LinkImage Use **LinkImage** when you need clickable framed image that opens a URL in a new tab.. Source description: Clickable framed image that opens a URL in a new tab. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { LinkImage } from '/snippets/components/elements/images/Image.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `src` | `any` | ``| Yes | src prop. | | `alt` | `any` |`` | Yes | alt prop. | \| `caption` | `any` | ``| Yes | caption prop. | | `icon` | `any` |`` | Yes | icon prop. | \| `hint` | `any` | ``| Yes | hint prop. | | `href` | `any` |`` | Yes | href prop. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### LivepeerSVG Use **LivepeerSVG** when you need inline Livepeer logo as SVG with currentColor fill.. Source description: Inline Livepeer logo as SVG with currentColor fill. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { LivepeerSVG } from '/snippets/components/elements/icons/Icons.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `size` | `number` | `24` | No | size prop. | \| `props` | `any` | \`\` | Yes | props prop. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### MathBlock Use **MathBlock** when you need renders LaTeX as a block-level math expression using KaTeX.. Source description: Renders LaTeX as a block-level math expression using KaTeX. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { MathBlock } from '/snippets/components/elements/math/Math.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `latex` | `any` | ``| Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` |`` | Yes | aria Label prop. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### MathInline Use **MathInline** when you need renders LaTeX as inline math using KaTeX.. Source description: Renders LaTeX as inline math using KaTeX. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { MathInline } from '/snippets/components/elements/math/Math.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `latex` | `any` | ``| Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` |`` | Yes | aria Label prop. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### PreviewCallout Use **PreviewCallout** when you need banner indicating content is in preview state. Deprecated wrapper around StatusCallout.. Source description: Banner indicating content is in preview state. Deprecated wrapper around StatusCallout. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { PreviewCallout } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `deprecated` * Accepts: `none` * Data source: `none` Deprecation note: Use StatusCallout with variant="preview" instead. See `StatusCallout`. **Props** No documented props. ### ReviewCallout Use **ReviewCallout** when you need banner indicating content is under technical review\.. Source description: Banner indicating content is under technical review. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { ReviewCallout } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `className` | `string` | `""` | No | CSS class name. | \| `style` | `object` | `{}` | No | Inline style overrides. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### SocialLinks Use **SocialLinks** when you need row of icon-only social media links with tooltips and aria-labels. Pass a links array to customise per product; omit for Livepeer defaults.. Source description: Row of icon-only social media links with tooltips and aria-labels. Pass a links array to customise per product; omit for Livepeer defaults. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { SocialLinks } from '/snippets/components/elements/links/Links.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `links` | `Array` | ``| No | Array of {icon, href, label} objects. Falls back to Livepeer defaults if omitted. | | `size` | `number` | `20` | No | Icon size in pixels. | | `gap` | `string` | `"var(--lp-spacing-3)"` | No | Gap between icons. | | `justify` | `string` | `"center"` | No | Flex justify-content value. | | `iconColor` | `string` |`` | No | Override all icons to a single colour. | \| `color` | `string` | \`\` | No | Alias for iconColor (backwards compat). | \| `className` | `string` | `""` | No | CSS class name. | \| `style` | `object` | `{}` | No | Inline style overrides. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### Spacer Use **Spacer** when you need empty spacer div with configurable size and direction.. Source description: Empty spacer div with configurable size and direction. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { Spacer } from '/snippets/components/elements/spacing/Divider.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `size` | `string` | `"var(--lp-spacing-4)"` | No | Size used by the component. | \| `direction` | `string` | `"vertical"` | No | Direction used by the component. | \| `className` | `string` | `''` | No | Optional CSS class override. | \| `style` | `object` | `{}` | No | Optional inline style override. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### StatusCallout Use **StatusCallout** when you need banner indicating page/feature status (coming soon or preview) with feedback links.. Source description: Banner indicating page/feature status (coming soon or preview) with feedback links. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { StatusCallout } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `stable` * Accepts: `none` * Data source: `none` **Props** \| Prop | Type | Default | Required | Description | \| --- | --- | --- | --- | --- | \| `variant` | `string` | `"coming-soon"` | No | Status variant: "coming-soon" or "preview". | \| `type` | `string` | `"page"` | No | Context type: "page" or "tab-group" (affects title text for coming-soon variant). | \| `className` | `string` | `""` | No | CSS class name. | \| `style` | `object` | `{}` | No | Inline style overrides. | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} ``` ### TipWithArrow Use **TipWithArrow** when you need callout with arrow. Deprecated wrapper around IconCallout.. Source description: Callout with arrow. Deprecated wrapper around IconCallout. **Import path** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} import { TipWithArrow } from '/snippets/components/elements/callouts/Callouts.jsx' ``` **Metadata** * Status: `deprecated` * Accepts: `none` * Data source: `none` Deprecation note: Use IconCallout with showArrow instead. See `IconCallout`. **Props** No documented props.