Skip to main content
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.

Back to Component Library

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

​
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
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

​
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
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

​
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
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

​
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
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

​
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
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
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

​
CustomCallout

Use CustomCallout when you need styled callout box. Deprecated alias for IconCallout.. Source description: Styled callout box. Deprecated alias for IconCallout. Import path
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
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

​
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
Metadata
  • Status: stable
  • Accepts: none
  • Data source: prop Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | value | string\|number | “ | Yes | The data value to render. |
Use DoubleIconLink when you need inline link with icons on both sides.. Source description: Inline link with icons on both sides. Import path
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

​
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
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

​
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
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

​
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
Metadata
  • Status: stable
  • Accepts: none
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | selectors | any | “ | Yes | selectors prop. |
Code example

​
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
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
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
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

​
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
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

​
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
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

​
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
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

​
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
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

​
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
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
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

​
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
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

​
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
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

​
MathInline

Use MathInline when you need renders LaTeX as inline math using KaTeX.. Source description: Renders LaTeX as inline math using KaTeX. Import path
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

​
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
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
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
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
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

​
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
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

​
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
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

​
TipWithArrow

Use TipWithArrow when you need callout with arrow. Deprecated wrapper around IconCallout.. Source description: Callout with arrow. Deprecated wrapper around IconCallout. Import path
Metadata
  • Status: deprecated
  • Accepts: none
  • Data source: none
Deprecation note: Use IconCallout with showArrow instead. See IconCallout. Props No documented props.
Last modified on May 19, 2026