Skip to main content

Documentation Index

Fetch the complete documentation index at: https://na-36-handover-docs-v2-into-docs-v2-dev-20260518.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

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

ComponentStatusImport pathDescription
AccordionTitlestable/snippets/components/elements/text/Text.jsxAccordion title with icon, name, and optional description subtitle. Wraps CustomCardTitle with an italic description line underneath.
AddressLinksstable/snippets/components/elements/links/Links.jsxCopyable contract address with blockchain explorer and GitHub links.
ArbitrumIconstable/snippets/components/elements/icons/Icons.jsxArbitrum logo rendered identically to Mintlify FA icons using mask-image technique.
ArbitrumSVGstable/snippets/components/elements/icons/Icons.jsxInline Arbitrum logo as SVG with currentColor fill.
BlinkingIconstable/snippets/components/elements/icons/Icons.jsxAnimated icon with pulsing opacity. Respects prefers-reduced-motion.
CardTitleTextWithArrowstable/snippets/components/elements/text/Text.jsxCard title with trailing arrow icon for navigation indication.
ComingSoonCalloutdeprecated/snippets/components/elements/callouts/Callouts.jsxBanner indicating a feature or page is coming soon. Deprecated wrapper around StatusCallout.
CopyTextstable/snippets/components/elements/text/Text.jsxText with a click-to-copy button that copies content to clipboard.
CustomCalloutdeprecated/snippets/components/elements/callouts/Callouts.jsxStyled callout box. Deprecated alias for IconCallout.
CustomCardTitlestable/snippets/components/elements/text/Text.jsxTitle row with icon and text, using flexbox alignment. Accepts Font Awesome strings or React components as icon. Variant prop controls styling context.
DataWrapstable/snippets/components/elements/text/DataWrap.jsxTransparent wrapper that renders a data value inline. Used to surface pipeline-generated values (e.g. lastVerified dates) in MDX without additional markup.
DoubleIconLinkstable/snippets/components/elements/links/Links.jsxInline link with icons on both sides.
DownloadButtonstable/snippets/components/elements/buttons/Buttons.jsxLazy-loaded download button with icon that renders on viewport intersection.
ExternalLinkButtonstable/snippets/components/elements/buttons/Buttons.jsxIcon button that opens an external link in a new tab. Bordered with rounded corners, hover colour transition.
FocusableScrollRegionsstable/snippets/components/elements/a11y/FocusableScrollRegion.jsxMakes scroll regions keyboard-focusable by adding tabindex to matching selectors.
GotoCardstable/snippets/components/elements/links/Links.jsxCard-style navigation link wrapping Mintlify Card component.
GotoLinkstable/snippets/components/elements/links/Links.jsxInline navigation link with icon prefix and label.
IconCalloutstable/snippets/components/elements/callouts/Callouts.jsxStyled callout box with icon, custom colour, and optional corner arrow indicator.
Imagestable/snippets/components/elements/images/Image.jsxFramed image with optional caption and full-width toggle.
InlineDividerstable/snippets/components/elements/spacing/Divider.jsxLightweight horizontal rule with controllable margin, padding, colour, and opacity. Use inside accordions, steps, or anywhere markdown --- gives no spacing control.
LinkArrowstable/snippets/components/elements/links/Links.jsxExternal link with arrow icon, optional description, and line break control.
LinkIconstable/snippets/components/elements/links/Links.jsxWraps a Mintlify Icon in an anchor tag. Strips default Mintlify link styling (border-bottom).
LinkImagestable/snippets/components/elements/images/Image.jsxClickable framed image that opens a URL in a new tab.
LivepeerSVGstable/snippets/components/elements/icons/Icons.jsxInline Livepeer logo as SVG with currentColor fill.
MathBlockstable/snippets/components/elements/math/Math.jsxRenders LaTeX as a block-level math expression using KaTeX.
MathInlinestable/snippets/components/elements/math/Math.jsxRenders LaTeX as inline math using KaTeX.
PreviewCalloutdeprecated/snippets/components/elements/callouts/Callouts.jsxBanner indicating content is in preview state. Deprecated wrapper around StatusCallout.
ReviewCalloutstable/snippets/components/elements/callouts/Callouts.jsxBanner indicating content is under technical review.
SocialLinksstable/snippets/components/elements/links/Links.jsxRow of icon-only social media links with tooltips and aria-labels. Pass a links array to customise per product; omit for Livepeer defaults.
Spacerstable/snippets/components/elements/spacing/Divider.jsxEmpty spacer div with configurable size and direction.
StatusCalloutstable/snippets/components/elements/callouts/Callouts.jsxBanner indicating page/feature status (coming soon or preview) with feedback links.
TipWithArrowdeprecated/snippets/components/elements/callouts/Callouts.jsxCallout 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 
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 
<AccordionTitle icon="gear" title="Core" description="Staking, payments, and service discovery" />
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 
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 
<AddressLinks address={controller} blockchainHref={`${arb}${controller}`} githubHref="https://github.com/livepeer/protocol/blob/delta/contracts/Controller.sol" />

​
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 
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 
<ArbitrumIcon size={16} />
<ArbitrumIcon color="var(--lp-color-accent)" />

​
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 
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 
<ArbitrumSVG size={24} />

​
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 
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 
<BlinkingIcon color="var(--lp-color-accent)" />

​
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 
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 
<CardTitleTextWithArrow cardProps="example">Example content</CardTitleTextWithArrow>

​
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 
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 
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 
<CopyText text="example" label="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 
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 
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 
<CustomCardTitle icon="sparkles" title="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 
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. |
Use DoubleIconLink when you need inline link with icons on both sides.. Source description: Inline link with icons on both sides. Import path 
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 
<DoubleIconLink />

​
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 
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 
<DownloadButton downloadLink="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 
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 
<ExternalLinkButton href="https://example.com" />

​
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 
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 
<FocusableScrollRegions selectors="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 
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 
<GotoCard label="example" relativePath="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 
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 
<GotoLink label="example" relativePath="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 
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 
<IconCallout color="#4a9eff">Tip content here</IconCallout>
<IconCallout color="#4a9eff" showArrow>Linked tip content</IconCallout>

​
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 
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 
<Image src="example" alt="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 
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 
<InlineDivider margin="0.5rem 0" />

​
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 
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 
<LinkArrow href="example" label="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 
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 
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 
<LinkImage src="example" alt="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 
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 
<LivepeerSVG props="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 
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 
<MathBlock latex="example" ariaLabel="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 
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 
<MathInline latex="example" ariaLabel="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 
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 
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 
<ReviewCallout />
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 
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 
<SocialLinks />

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

​
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 
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 
<StatusCallout variant="coming-soon" />
<StatusCallout variant="preview" />

​
TipWithArrow

Use TipWithArrow when you need callout with arrow. Deprecated wrapper around IconCallout.. Source description: Callout with arrow. Deprecated wrapper around IconCallout. Import path 
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.
Last modified on May 19, 2026