Primitives - Livepeer Docs

Back to Component Library

Return to the main component library index

Buttons & Actions

DownloadButton

Interactive download button with lazy loading for performance optimization. Import:

import { DownloadButton } from "/snippets/components/primitives/buttons.jsx";

Props:

Prop	Type	Default	Required	Description
`label`	`string`	`"Download"`	No	Button text label
`icon`	`string`	`"download"`	No	Left icon name
`downloadLink`	`string`	-	Yes	URL of the file to download
`rightIcon`	`string`	`""`	No	Optional right icon name
`border`	`boolean`	`false`	No	Whether to show a border around the button

Examples:

Basic
Custom Label
With Icons
Code

<DownloadButton downloadLink="https://example.com/file.pdf" />

<DownloadButton 
  label="Download PDF" 
  downloadLink="https://example.com/file.pdf" 
  icon="file-pdf"
  rightIcon="arrow-right"
  border={true}
/>

BasicBtn

Placeholder component for basic button functionality. Currently returns empty div. Import:

import { BasicBtn } from "/snippets/components/primitives/buttons.jsx";

Props: None Note: This is a placeholder component and currently non-functional.

Icons & Branding

LivepeerIcon

Theme-aware Livepeer logo icon that automatically adapts to light/dark mode. Import:

import { LivepeerIcon } from "/snippets/components/primitives/icons.jsx";

Props:

Prop	Type	Default	Required	Description
`size`	`number`	`16`	No	Icon size in pixels
`color`	`string`	theme-aware	No	Custom color override (defaults to theme-aware color)

Examples:

Default
Custom Color
Code

Default size

Size 24

Size 32

<LivepeerIcon />
<LivepeerIcon size={24} />
<LivepeerIcon size={32} color="#00cc88" />

LivepeerIconFlipped

Horizontally flipped Livepeer icon. Useful for decorative purposes or directional indicators. Import:

import { LivepeerIconFlipped } from "/snippets/components/primitives/icons.jsx";

Props: Same as LivepeerIcon (accepts all Icon component props) Examples:

Example
Code

Normal

Flipped

<LivepeerIconFlipped size={24} />

LivepeerSVG

Inline SVG version of the Livepeer logo. Uses em units for responsive sizing. Import:

import { LivepeerSVG } from "/snippets/components/primitives/icons.jsx";

Props:

Prop	Type	Default	Required	Description
`size`	`number`	`24`	No	Size parameter (currently unused, uses 1em)
`...props`	`object`	-	No	Additional SVG props

Examples:

Example
Code

<LivepeerSVG size={32} />

LivepeerIconOld

Legacy Livepeer icon component using the light symbol SVG file. Import:

import { LivepeerIconOld } from "/snippets/components/primitives/icons.jsx";

Props: Accepts all Icon component props Note: This is the older version. Prefer LivepeerIcon for new code.

Links & Navigation

GotoLink

Simple navigation link with icon for internal documentation pages. Import:

import { GotoLink } from "/snippets/components/primitives/links.jsx";

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

Examples:

Basic
With Text
Custom Icon
Code

Getting Started

<GotoLink label="Getting Started" relativePath="/get-started" />
<GotoLink label="API Reference" relativePath="/api" text="See the" icon="book" />

GotoCard

Card component for navigation with link, icon, and optional CTA. Import:

import { GotoCard } from "/snippets/components/primitives/links.jsx";

Props:

Prop	Type	Default	Required	Description
`label`	`string`	-	Yes	Card title
`relativePath`	`string`	-	Yes	Relative URL path
`icon`	`string`	`"arrow-turn-down-right"`	No	Icon to display
`text`	`ReactNode`	-	Yes	Card content
`cta`	`string`	`""`	No	Call-to-action button text
`...props`	`object`	-	No	Additional Card component props

Examples:

Basic
With CTA
Code

API Reference

Complete API documentation with examples and code snippets

<GotoCard
  label="API Reference"
  relativePath="/api/reference"
  text="Complete API documentation"
  cta="View Docs"
/>

CustomCallout

A stylized callout box with customizable icon and colors. Automatically converts hex colors to rgba for proper opacity handling. Import:

import { CustomCallout } from "/snippets/components/primitives/links.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display in the callout
`icon`	`string`	`"lightbulb"`	No	Icon name to display
`color`	`string`	theme accent	No	Primary color for icon, border, and background
`iconSize`	`number`	`16`	No	Size of the icon in pixels
`textSize`	`string`	`"0.875rem"`	No	Font size for the text content
`textColor`	`string`	matches `color`	No	Text color (defaults to match icon color)

Examples:

Info
Warning
Success
Code

This is an informational message with a blue info icon.

<CustomCallout icon="info" color="#3b82f6">
  Important information message
</CustomCallout>

<CustomCallout icon="warning" color="#ef4444">
  Warning message
</CustomCallout>

TipWithArrow

Callout box with an arrow indicator in the top-right corner. Similar to CustomCallout but includes an arrow icon. Import:

import { TipWithArrow } from "/snippets/components/primitives/links.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display in the tip
`icon`	`string`	`"lightbulb"`	No	Main icon to display on the left
`arrowIcon`	`string`	`"arrow-up-right"`	No	Arrow icon to display in top-right
`color`	`string`	theme accent	No	Primary color for icons, border, and background
`iconSize`	`number`	`16`	No	Size of the main icon in pixels
`arrowSize`	`number`	`16`	No	Size of the arrow icon in pixels

Examples:

Basic
Custom Arrow
Code

Check out the related documentation for more details!

<TipWithArrow icon="info" color="#3b82f6">
  Check out the related documentation!
</TipWithArrow>

LinkArrow

Link component with arrow icon and optional newline. Import:

import { LinkArrow } from "/snippets/components/primitives/links.jsx";

Props:

Prop	Type	Default	Required	Description
`href`	`string`	-	Yes	Link URL
`label`	`string`	-	Yes	Link text
`newline`	`boolean`	`true`	No	Whether to add a line break before the link
`borderColor`	`string`	-	No	Optional border color

Examples:

Example
Code

Visit Livepeer

<LinkArrow href="https://livepeer.org" label="Visit Livepeer" />
<LinkArrow href="/v2/home/mission-control" label="Documentation" newline={false} />

Text & Typography

Subtitle

Styled subtitle text component with customizable styling. Import:

import { Subtitle } from "/snippets/components/primitives/text.jsx";

Props:

Prop	Type	Default	Required	Description
`text`	`string`	-	No	Subtitle text (alternative to children)
`children`	`ReactNode`	-	No	Alternative content (alternative to text)
`style`	`object`	`{}`	No	Custom styles object
`style.fontSize`	`string`	`"1rem"`	No	Font size
`style.fontStyle`	`string`	`"italic"`	No	Font style
`style.color`	`string`	`"var(--accent)"`	No	Text color
`style.marginBottom`	`string`	`0`	No	Bottom margin

Examples:

Basic
Custom Style
Code

This is a subtitle

<Subtitle text="This is a subtitle" />
<Subtitle style={{ fontSize: "1.2rem", color: "#00cc88" }}>
  Custom styled subtitle
</Subtitle>

CopyText

Inline code with copy button. Displays text in a code block with a clickable copy button. Import:

import { CopyText } from "/snippets/components/primitives/text.jsx";

Props:

Prop	Type	Default	Required	Description
`text`	`string`	-	Yes	The text to display and copy
`label`	`string`	-	No	Optional label before the text

Examples:

Basic
With Label
Code

0x1234567890abcdef

Address:0x1234567890abcdef

<CopyText text="0x1234567890abcdef" />
<CopyText text="npm install livepeer" label="Command:" />

CardTitleTextWithArrow

Card title component with arrow icon integrated into the title. Import:

import { CardTitleTextWithArrow } from "/snippets/components/primitives/text.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Title text content
`...cardProps`	`object`	-	No	Additional Card component props

Examples:

Example
Code

Card Title with Arrow

<CardTitleTextWithArrow>
  My Card Title
</CardTitleTextWithArrow>

AccordionTitleWithArrow

Accordion title component with arrow icon and optional link. Import:

import { AccordionTitleWithArrow } from "/snippets/components/primitives/text.jsx";

Props:

Prop	Type	Default	Required	Description
`text`	`string`	-	Yes	Title text
`href`	`string`	-	Yes	Link URL
`color`	`string`	`"var(--text)"`	No	Text color

Examples:

Example
Code

Learn More

<AccordionTitleWithArrow text="Learn More" href="/v2/home/mission-control" />

Dividers

CustomDivider

Decorative horizontal divider with Livepeer branding icons on both ends. Optionally includes centered text between the divider lines. Icons automatically adapt to light/dark theme. Import:

import { CustomDivider } from "/snippets/components/primitives/divider.jsx";

Props:

Prop	Type	Default	Required	Description
`middleText`	`string`	`""`	No	Optional text to display in the center of the divider
`color`	`string`	`"var(--border)"`	No	Color for the middle text
`style`	`object`	`{}`	No	Additional CSS styles
`style.margin`	`string`	`"24px 0"`	No	Vertical margin
`style.fontSize`	`string`	`"16px"`	No	Font size for middle text

Examples:

Basic
With Text
Custom Color
Code

<CustomDivider />
<CustomDivider middleText="Section Break" />
<CustomDivider middleText="OR" color="#2d9a67" />

Layout

Layout Primitives

Layout components for organizing content without inline styles in MDX files.

FlexContainer

Flexbox container component for arranging items in rows or columns. Import:

import { FlexContainer } from "/snippets/components/primitives/layout.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display
`direction`	`string`	`"row"`	No	Flex direction: “row” \| “column” \| “row-reverse” \| “column-reverse”
`gap`	`string`	`"1rem"`	No	Gap between items (CSS value)
`align`	`string`	`"flex-start"`	No	Align items: “flex-start” \| “center” \| “flex-end” \| “stretch”
`justify`	`string`	`"flex-start"`	No	Justify content: “flex-start” \| “center” \| “flex-end” \| “space-between” \| “space-around” \| “space-evenly”
`wrap`	`boolean`	`false`	No	Allow wrapping
`style`	`object`	`{}`	No	Additional inline styles

Examples:

Row Layout
Column Layout
Centered
Code

Card 1

Content 1

Card 2

Content 2

Card 3

Content 3

<FlexContainer gap="1rem">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
</FlexContainer>

<FlexContainer direction="column" gap="0.5rem" align="center">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
</FlexContainer>

GridContainer

CSS Grid container component for grid layouts. Import:

import { GridContainer } from "/snippets/components/primitives/layout.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display
`columns`	`string\|number`	-	No	Number of columns or CSS grid-template-columns value
`gap`	`string`	`"1rem"`	No	Gap between items (CSS value)
`style`	`object`	`{}`	No	Additional inline styles

Examples:

3 Columns
Code

Card 1

Content

Card 2

Content

Card 3

Content

<GridContainer columns={3} gap="2rem">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</GridContainer>

Spacer

Vertical or horizontal spacing component. Import:

import { Spacer } from "/snippets/components/primitives/layout.jsx";

Props:

Prop	Type	Default	Required	Description
`size`	`string`	`"1rem"`	No	Spacing size (CSS value)
`direction`	`string`	`"vertical"`	No	Spacing direction: “vertical” \| “horizontal”

Examples:

Vertical Spacing
Code

Card 1

Content

Card 2

Content

<Card>Content 1</Card>
<Spacer size="2rem" />
<Card>Content 2</Card>

Tables

Table Primitives

Table components for structured data display without inline styles.

StyledTable

Theme-aware table component with variant support. Import:

import { StyledTable, TableRow, TableCell } from "/snippets/components/primitives/tables.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Table content (thead, tbody, etc.)
`variant`	`string`	`"default"`	No	Table variant: “default” \| “bordered” \| “minimal”
`style`	`object`	`{}`	No	Additional inline styles

Examples:

Default Table
Code

Name	Status
Item 1	Active
Item 2	Pending

<StyledTable variant="bordered">
  <thead>
    <TableRow header>
      <TableCell header>Header 1</TableCell>
      <TableCell header align="center">Header 2</TableCell>
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <TableCell>Data 1</TableCell>
      <TableCell align="center">Data 2</TableCell>
    </TableRow>
  </tbody>
</StyledTable>

TableRow Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Table cells
`header`	`boolean`	`false`	No	Is this a header row?
`hover`	`boolean`	`false`	No	Enable hover effect
`style`	`object`	`{}`	No	Additional inline styles

TableCell Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Cell content
`align`	`string`	`"left"`	No	Text alignment: “left” \| “center” \| “right”
`header`	`boolean`	`false`	No	Is this a header cell?
`style`	`object`	`{}`	No	Additional inline styles

Containers

Container Primitives

Container components for grouping and organizing content.

BorderedBox

Theme-aware bordered container component. Import:

import { BorderedBox } from "/snippets/components/primitives/containers.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display
`variant`	`string`	`"default"`	No	Border variant: “default” \| “accent” \| “muted”
`padding`	`string`	`"1rem"`	No	Internal padding (CSS value)
`borderRadius`	`string`	`"8px"`	No	Border radius (CSS value)
`style`	`object`	`{}`	No	Additional inline styles

Examples:

Default
Accent Variant
Code

This is a bordered box with default styling.

<BorderedBox variant="accent" padding="1.5rem">
  Important content here
</BorderedBox>

CenteredContainer

Centered content container component. Import:

import { CenteredContainer } from "/snippets/components/primitives/containers.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display
`maxWidth`	`string`	`"800px"`	No	Maximum width (CSS value)
`padding`	`string`	`"0"`	No	Internal padding (CSS value)
`style`	`object`	`{}`	No	Additional inline styles

Examples:

Centered Content
Code

Centered Card

This card is centered with a max width of 600px.

<CenteredContainer maxWidth="600px">
  Centered content here
</CenteredContainer>

FullWidthContainer

Full-width breakout container component for hero sections and full-width content. Import:

import { FullWidthContainer } from "/snippets/components/primitives/containers.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display
`backgroundColor`	`string`	-	No	Background color (CSS value or CSS variable)
`style`	`object`	`{}`	No	Additional inline styles

Examples:

Full Width
Code

Full-width hero content

<FullWidthContainer backgroundColor="var(--accent)">
  Full-width hero content
</FullWidthContainer>

Next: Display Components

Continue to Display Components →

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​Buttons & Actions

​DownloadButton

​BasicBtn

​Icons & Branding

​LivepeerIcon

​LivepeerIconFlipped

​LivepeerSVG

​LivepeerIconOld

​Links & Navigation

​GotoLink

​GotoCard

API Reference

Getting Started

​CustomCallout

​TipWithArrow

​LinkArrow

​Text & Typography

​Subtitle

​CopyText

​CardTitleTextWithArrow

Card Title with Arrow

​AccordionTitleWithArrow

​Dividers

​CustomDivider

​Layout Primitives

​FlexContainer

Card 1

Card 2

Card 3

Item 1

Item 2

Centered

Centered

​GridContainer

Card 1

Card 2

Card 3

​Spacer

Card 1

Card 2

​Table Primitives

​StyledTable

​Container Primitives

​BorderedBox

​CenteredContainer

Centered Card

​FullWidthContainer

Next: Display Components

Buttons & Actions

DownloadButton

BasicBtn

Icons & Branding

LivepeerIcon

LivepeerIconFlipped

LivepeerSVG

LivepeerIconOld

Links & Navigation

GotoLink

GotoCard

CustomCallout

TipWithArrow

LinkArrow

Text & Typography

Subtitle

CopyText

CardTitleTextWithArrow

AccordionTitleWithArrow

Dividers

CustomDivider

Layout Primitives

FlexContainer

GridContainer

Spacer

Table Primitives

StyledTable

Container Primitives

BorderedBox

CenteredContainer

FullWidthContainer