Primitives - Livepeer Docs

Back to Component Library

Return to the main component library index

Buttons & Actions

Boutons & Actions

DownloadButton

Bouton de téléchargement interactif avec chargement différé pour l’optimisation des performances. Import:

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

Props:

Prop	Type	Défaut	Requis	Description
`label`	`string`	`"Download"`	Non	Étiquette du texte du bouton
`icon`	`string`	`"download"`	Non	Nom de l’icône de gauche
`downloadLink`	`string`	-	Oui	URL du fichier à télécharger
`rightIcon`	`string`	`""`	Non	Nom de l’icône à droite facultative
`border`	`boolean`	`false`	Non	Si afficher une bordure autour du bouton

Exemples :

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

Composant de remplacement pour la fonctionnalité de base du bouton. Retourne actuellement un div vide. Importer :

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

Props : Aucun Remarque : C’est un composant de substitution et actuellement non fonctionnel.

Icons & Branding

Icônes et identité visuelle

LivepeerIcon

Logo icon Livepeer sensible au thème qui s’adapte automatiquement aux modes clair et sombre. Importation :

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

Props :

Propriété	Type	Par défaut	Requis	Description
`size`	`number`	`16`	Non	Taille de l’icône en pixels
`color`	`string`	Conscient du thème	Non	Remplacement de couleur personnalisé (par défaut, couleur adaptée au thème)

Exemples :

Default
Custom Color
Code

Default size

Size 24

Size 32

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

LivepeerIconFlipped

Icône Livepeer retournée horizontalement. Utile pour des fins décoratives ou des indicateurs directionnels. Importer :

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

Props : Même que LivepeerIcon (accepte toutes les propriétés du composant Icon) Exemples :

Example
Code

Normal

Flipped

<LivepeerIconFlipped size={24} />

LivepeerSVG

Version SVG en ligne du logo Livepeer. Utilise des unités em pour une taille adaptative. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`size`	`number`	`24`	Non	Paramètre taille (actuellement non utilisé, utilise 1em)
`...props`	`object`	-	Non	Propriétés SVG supplémentaires

Exemples :

Example
Code

<LivepeerSVG size={32} />

LivepeerIconOld

Composant d’icône Livepeer ancien utilisant le fichier SVG du symbole clair. Importer :

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

**Props :**Accepte toutes les props du composant Icon Remarque : C’est la version plus ancienne. PrivilégierLivepeerIcon pour un nouveau code.

Links & Navigation

GotoLink

Lien de navigation simple avec une icône pour les pages de documentation internes. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`label`	`string`	-	Oui	Texte/étiquette du lien
`relativePath`	`string`	-	Oui	Chemin d’accès relatif
`text`	`string`	`""`	Non	Texte facultatif à afficher avant le lien
`icon`	`string`	`"arrow-turn-down-right"`	Non	Icône à afficher

Exemples :

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

Composant Card pour la navigation avec un lien, une icône et un CTA facultatif. Importer :

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

Props :

Prop	Type	Par défaut	Requis	Description
`label`	`string`	-	Oui	Titre de la carte
`relativePath`	`string`	-	Oui	Chemin d’accès relatif
`icon`	`string`	`"arrow-turn-down-right"`	Non	Icône à afficher
`text`	`ReactNode`	-	Oui	Contenu de la carte
`cta`	`string`	`""`	Non	Texte du bouton d’appel à l’action
`...props`	`object`	-	Non	Propriétés supplémentaires du composant Card

Exemples :

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

Une boîte d’alerte stylisée avec une icône et des couleurs personnalisables. Convertit automatiquement les couleurs hexadécimales en rgba pour une gestion correcte de l’opacité. Importer :

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

Propriétés :

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher dans l’appel
`icon`	`string`	`"lightbulb"`	Non	Nom de l’icône à afficher
`color`	`string`	accent de thème	Non	Couleur principale pour l’icône, la bordure et l’arrière-plan
`iconSize`	`number`	`16`	Non	Taille de l’icône en pixels
`textSize`	`string`	`"0.875rem"`	Non	Taille de police pour le contenu texte
`textColor`	`string`	correspond à `color`	Non	Couleur du texte (par défaut, correspond à la couleur de l’icône)

Exemples :

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

Boîte d’information avec une flèche indiquant en haut à droite. Similaire à CustomCallout mais avec une icône de flèche. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher dans le conseil
`icon`	`string`	`"lightbulb"`	Non	Icône principale à afficher à gauche
`arrowIcon`	`string`	`"arrow-up-right"`	Non	Icône flèche à afficher en haut à droite
`color`	`string`	accent du thème	Non	Couleur principale pour les icônes, les bordures et le fond
`iconSize`	`number`	`16`	Non	Taille de l’icône principale en pixels
`arrowSize`	`number`	`16`	Non	Taille de l’icône de flèche en pixels

Exemples :

Basic
Custom Arrow
Code

Check out the related documentation for more details!

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

LinkArrow

Composant Link avec icône de flèche et saut de ligne facultatif. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`href`	`string`	-	Oui	Lien URL
`label`	`string`	-	Oui	Texte du lien
`newline`	`boolean`	`true`	Non	Ajouter un saut de ligne avant le lien
`borderColor`	`string`	-	Non	Couleur de bordure facultative

Exemples :

Example
Code

Visit Livepeer

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

Text & Typography

Texte et typographie

Sous-titre

Composant de texte de sous-titre stylisé avec un style personnalisable. Importer :

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

Props :

Prop	Type	Par défaut	Requis	Description
`text`	`string`	-	Non	Texte de sous-titre (alternative à children)
`children`	`ReactNode`	-	Non	Contenu alternatif (alternative à text)
`style`	`object`	`{}`	Non	Objet de styles personnalisés
`style.fontSize`	`string`	`"1rem"`	Non	Taille de police
`style.fontStyle`	`string`	`"italic"`	Non	Style de police
`style.color`	`string`	`"var(--accent)"`	Non	Couleur du texte
`style.marginBottom`	`string`	`0`	Non	Marge inférieure

Exemples :

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>

Copier le texte

Code en ligne avec bouton de copie. Affiche le texte dans un bloc de code avec un bouton de copie cliquable. Importer :

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

Props :

Prop	Type	Par défaut	Requis	Description
`text`	`string`	-	Oui	Le texte à afficher et à copier
`label`	`string`	-	Non	Étiquette facultative avant le texte

Exemples :

Basic
With Label
Code

0x1234567890abcdef

Address:0x1234567890abcdef

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

CardTitleTextWithArrow

Composant de titre de carte avec une flèche intégrée au titre. Importation :

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

Props :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu du titre
`...cardProps`	`object`	-	Non	Propriétés supplémentaires du composant Card

Exemples :

Example
Code

Card Title with Arrow

<CardTitleTextWithArrow>
  My Card Title
</CardTitleTextWithArrow>

AccordionTitleWithArrow

Composant de titre d’accordéon avec icône de flèche. Utilisez des liens à l’intérieur du contenu de l’accordéon, et non dans le titre, pour éviter les éléments interactifs imbriqués. Importation :

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

Props :

Prop	Type	Défaut	Requis	Description
`text`	`string`	-	Non	Texte du titre (facultatif si`children` fourni)
`children`	`ReactNode`	-	Non	Alternative à`text`
`color`	`string`	`"var(--text)"`	Non	Couleur du texte

Exemples :

Example
Code

Learn More

<AccordionTitleWithArrow text="Learn More" />

Dividers

Séparateurs

CustomDivider

Séparateur horizontal décoratif avec des icônes de marque Livepeer des deux côtés. Peut inclure du texte centré entre les lignes du séparateur. Les icônes s’adaptent automatiquement aux thèmes clair et sombre. Importation :

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

Props :

Prop	Type	Défaut	Requis	Description
`middleText`	`string`	`""`	Non	Texte facultatif à afficher au centre du séparateur
`color`	`string`	`"var(--border)"`	Non	Couleur pour le texte central
`style`	`object`	`{}`	Non	Styles CSS supplémentaires
`style.margin`	`string`	`"24px 0"`	Non	Marge verticale
`style.fontSize`	`string`	`"16px"`	Non	Taille de police pour le texte central

Exemples :

Basic
With Text
Custom Color
Code

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

Layout

Primitifs de mise en page

Composants de mise en page pour organiser le contenu sans styles en ligne dans les fichiers MDX.

FlexContainer

Composant de conteneur Flexbox pour organiser les éléments en lignes ou en colonnes. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher
`direction`	`string`	`"row"`	Non	Direction flexible : “row"	"column"	"row-reverse"	"column-reverse”
`gap`	`string`	`"1rem"`	Non	Espace entre les éléments (valeur CSS)
`align`	`string`	`"flex-start"`	Non	Alignement des éléments : “flex-start"	"center"	"flex-end"	"stretch”
`justify`	`string`	`"flex-start"`	Non	Justifier le contenu : “flex-start"	"center"	"flex-end"	"space-between"	"space-around"	"space-evenly”
`wrap`	`boolean`	`false`	Non	Autoriser le passage à la ligne
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Exemples :

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

Composant de conteneur CSS Grid pour les dispositions en grille. Importation :

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

Props :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher
`columns`	`string\|number`	-	Non	Nombre de colonnes ou valeur de CSS grid-template-columns
`gap`	`string`	`"1rem"`	Non	Espace entre les éléments (valeur CSS)
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Exemples :

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>

Espaceur

Composant de mise en page verticale ou horizontale. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`size`	`string`	`"1rem"`	Non	Taille de l’espace (valeur CSS)
`direction`	`string`	`"vertical"`	Aucun	Direction de l’espace : “vertical"	"horizontal”

Exemples :

Vertical Spacing
Code

Card 1

Content

Card 2

Content

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

Tables

Composants de tableau

Composants de tableau pour l’affichage de données structurées sans styles en ligne.

StyledTable

Composant de tableau sensible au thème avec prise en charge des variantes. Importation :

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

Props :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu du tableau (thead, tbody, etc.)
`variant`	`string`	`"default"`	Non	Variante du tableau : “default"	"bordered"	"minimal”
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Exemples :

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>

Propriétés TableRow :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Cellules du tableau
`header`	`boolean`	`false`	Non	Est-ce une ligne d’en-tête ?
`hover`	`boolean`	`false`	Non	Activer l’effet au survol
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Props TableCell :

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu de la cellule
`align`	`string`	`"left"`	Non	Alignement du texte : “gauche"	"centré"	"droite”
`header`	`boolean`	`false`	Non	Est-ce une cellule d’en-tête ?
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Containers

Primitifs de conteneur

Composants conteneurs pour regrouper et organiser le contenu.

BorderedBox

Composant conteneur avec bordure adapté au thème. Importation :

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

Props :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher
`variant`	`string`	`"default"`	Non	Variante de bordure : “default"	"accent"	"muted”
`padding`	`string`	`"1rem"`	Non	Remplissage interne (valeur CSS)
`borderRadius`	`string`	`"8px"`	Non	Rayon de bord (valeur CSS)
`style`	`object`	`{}`	Aucun	Styles en ligne supplémentaires

Exemples :

Default
Accent Variant
Code

This is a bordered box with default styling.

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

CenteredContainer

Composant de conteneur de contenu centré. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher
`maxWidth`	`string`	`"800px"`	Non	Largeur maximale (valeur CSS)
`padding`	`string`	`"0"`	Non	Remplissage interne (valeur CSS)
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Exemples :

Centered Content
Code

Centered Card

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

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

FullWidthContainer

Composant conteneur de rupture à pleine largeur pour les sections d’accueil et le contenu à pleine largeur. Importer :

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

Props :

Propriété	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher
`backgroundColor`	`string`	-	Non	Couleur d’arrière-plan (valeur CSS ou variable CSS)
`style`	`object`	`{}`	Non	Styles en ligne supplémentaires

Exemples :

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

​Boutons & Actions

​DownloadButton

​BasicBtn

​Icônes et identité visuelle

​LivepeerIcon

​LivepeerIconFlipped

​LivepeerSVG

​LivepeerIconOld

​Liens et navigation

​GotoLink

​GotoCard

API Reference

Getting Started

​CustomCallout

​TipWithArrow

​LinkArrow

​Texte et typographie

​Sous-titre

​Copier le texte

​CardTitleTextWithArrow

Card Title with Arrow

​AccordionTitleWithArrow

​Séparateurs

​CustomDivider

​Primitifs de mise en page

​FlexContainer

Card 1

Card 2

Card 3

Item 1

Item 2

Centered

Centered

​GridContainer

Card 1

Card 2

Card 3

​Espaceur

Card 1

Card 2

​Composants de tableau

​StyledTable

​Primitifs de conteneur

​BorderedBox

​CenteredContainer

Centered Card

​FullWidthContainer

Next: Display Components

Boutons & Actions

DownloadButton

BasicBtn

Icônes et identité visuelle

LivepeerIcon

LivepeerIconFlipped

LivepeerSVG

LivepeerIconOld

Liens et navigation

GotoLink

GotoCard

CustomCallout

TipWithArrow

LinkArrow

Texte et typographie

Sous-titre

Copier le texte

CardTitleTextWithArrow

AccordionTitleWithArrow

Séparateurs

CustomDivider

Primitifs de mise en page

FlexContainer

GridContainer

Espaceur

Composants de tableau

StyledTable

Primitifs de conteneur

BorderedBox

CenteredContainer

FullWidthContainer