Primitivos - Livepeer Docs

Back to Component Library

Return to the main component library index

Buttons & Actions

Botones y Acciones

DownloadButton

Botón de descarga interactivo con carga diferida para optimización del rendimiento. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`label`	`string`	`"Download"`	No	Etiqueta de texto del botón
`icon`	`string`	`"download"`	No	Nombre del icono izquierdo
`downloadLink`	`string`	-	Sí	URL del archivo para descargar
`rightIcon`	`string`	`""`	No	Nombre del icono derecho opcional
`border`	`boolean`	`false`	No	Si se muestra un borde alrededor del botón

Ejemplos:

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

Componente de marcador de posición para la funcionalidad básica del botón. Actualmente devuelve un div vacío. Importar:

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

Props: Ninguno Nota: Este es un componente de marcador de posición y actualmente no es funcional.

Icons & Branding

Iconos y marca

LivepeerIcon

Icono de Livepeer orientado al tema que se adapta automáticamente a los modos claro/oscuro. Importar:

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

Props:

Propiedad	Tipo	Predeterminado	Requerido	Descripción
`size`	`number`	`16`	No	Tamaño del icono en píxeles
`color`	`string`	Con conciencia de tema	No	Sobrescritura de color personalizado (predeterminado al color orientado al tema)

Ejemplos:

Default
Custom Color
Code

Default size

Size 24

Size 32

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

LivepeerIconFlipped

Icono Livepeer horizontalmente volteado. Útil para fines decorativos o indicadores direccionales. Importar:

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

Props: Igual queLivepeerIcon (acepta todas las propiedades del componente Icon) Ejemplos:

Example
Code

Normal

Flipped

<LivepeerIconFlipped size={24} />

LivepeerSVG

Versión SVG en línea del logotipo de Livepeer. Utiliza unidades em para un tamaño adaptable. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`size`	`number`	`24`	No	Parámetro de tamaño (actualmente no utilizado, usa 1em)
`...props`	`object`	-	No	Propiedades SVG adicionales

Ejemplos:

Example
Code

<LivepeerSVG size={32} />

LivepeerIconOld

Componente de icono antiguo Livepeer usando el archivo SVG del símbolo claro. Importar:

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

**Props:**Acepta todas las props del componente Icon Nota: Esta es la versión anterior. Preferir LivepeerIcon para nuevo código.

Links & Navigation

Enlaces y navegación

GotoLink

Enlace de navegación simple con icono para páginas de documentación interna. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`label`	`string`	-	Sí	Texto/etiqueta del enlace
`relativePath`	`string`	-	Sí	Ruta de URL relativa
`text`	`string`	`""`	No	Texto opcional para mostrar antes del enlace
`icon`	`string`	`"arrow-turn-down-right"`	No	Icono para mostrar

Ejemplos:

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

Componente Card para navegación con enlace, icono y CTA opcional. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`label`	`string`	-	Sí	Título de la tarjeta
`relativePath`	`string`	-	Sí	Ruta de URL relativa
`icon`	`string`	`"arrow-turn-down-right"`	No	Icono a mostrar
`text`	`ReactNode`	-	Sí	Contenido de la tarjeta
`cta`	`string`	`""`	No	Texto del botón de acción
`...props`	`object`	-	No	Propiedades adicionales del componente Card

Ejemplos:

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

Una caja de llamada con estilo, con icono y colores personalizables. Convierte automáticamente los colores en hex a rgba para un manejo adecuado de la opacidad. Importar:

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

Propiedades:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido para mostrar en la llamada
`icon`	`string`	`"lightbulb"`	No	Nombre del icono a mostrar
`color`	`string`	acento de tema	No	Color principal para el icono, borde y fondo
`iconSize`	`number`	`16`	No	Tamaño del icono en píxeles
`textSize`	`string`	`"0.875rem"`	No	Tamaño de fuente para el contenido de texto
`textColor`	`string`	coincide con `color`	No	Color del texto (predeterminado para coincidir con el color del icono)

Ejemplos:

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

Caja de llamada con un indicador de flecha en la esquina superior derecha. Similar a CustomCallout pero incluye un icono de flecha. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido para mostrar en el consejo
`icon`	`string`	`"lightbulb"`	No	Icono principal para mostrar a la izquierda
`arrowIcon`	`string`	`"arrow-up-right"`	No	Icono de flecha para mostrar en la esquina superior derecha
`color`	`string`	Acento de tema	No	Color principal para iconos, bordes y fondo
`iconSize`	`number`	`16`	No	Tamaño del icono principal en píxeles
`arrowSize`	`number`	`16`	No	Tamaño del icono de flecha en píxeles

Ejemplos:

Basic
Custom Arrow
Code

Check out the related documentation for more details!

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

LinkArrow

Componente Link con icono de flecha y salto de línea opcional. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`href`	`string`	-	Sí	URL del enlace
`label`	`string`	-	Sí	Texto del enlace
`newline`	`boolean`	`true`	No	Si agregar un salto de línea antes del enlace
`borderColor`	`string`	-	No	Color de borde opcional

Ejemplos:

Example
Code

Visit Livepeer

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

Text & Typography

Texto y tipografía

Subtítulo

Componente de texto de subtítulo con estilo personalizable. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`text`	`string`	-	No	Texto de subtítulo (alternativa a children)
`children`	`ReactNode`	-	No	Contenido alternativo (alternativa a text)
`style`	`object`	`{}`	No	Objeto de estilos personalizados
`style.fontSize`	`string`	`"1rem"`	No	Tamaño de fuente
`style.fontStyle`	`string`	`"italic"`	No	Estilo de fuente
`style.color`	`string`	`"var(--accent)"`	No	Color del texto
`style.marginBottom`	`string`	`0`	No	Margen inferior

Ejemplos:

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

Código en línea con botón de copia. Muestra el texto en un bloque de código con un botón de copia clicable. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`text`	`string`	-	Sí	El texto para mostrar y copiar
`label`	`string`	-	No	Etiqueta opcional antes del texto

Ejemplos:

Basic
With Label
Code

0x1234567890abcdef

Address:0x1234567890abcdef

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

CardTitleTextWithArrow

Componente de título de tarjeta con icono de flecha integrado en el título. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido del título
`...cardProps`	`object`	-	No	Propiedades adicionales del componente Card

Ejemplos:

Example
Code

Card Title with Arrow

<CardTitleTextWithArrow>
  My Card Title
</CardTitleTextWithArrow>

AccordionTitleWithArrow

Componente de título de acordeón con icono de flecha. Use enlaces dentro del contenido del acordeón, no en el título, para evitar elementos interactivos anidados. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`text`	`string`	-	No	Texto del título (opcional si `children` proporcionado)
`children`	`ReactNode`	-	No	Alternativa a`text`
`color`	`string`	`"var(--text)"`	No	Color de texto

Ejemplos:

Example
Code

Learn More

<AccordionTitleWithArrow text="Learn More" />

Dividers

Divisores

CustomDivider

Divisor horizontal decorativo con iconos de marca Livepeer en ambos extremos. Opcionalmente incluye texto centrado entre las líneas del divisor. Los iconos se adaptan automáticamente al tema claro/oscuro. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`middleText`	`string`	`""`	No	Texto opcional para mostrar en el centro del divisor
`color`	`string`	`"var(--border)"`	No	Color para el texto central
`style`	`object`	`{}`	No	Estilos CSS adicionales
`style.margin`	`string`	`"24px 0"`	No	Margen vertical
`style.fontSize`	`string`	`"16px"`	No	Tamaño de fuente para texto medio

Ejemplos:

Basic
With Text
Custom Color
Code

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

Layout

Primitivas de diseño

Componentes de diseño para organizar contenido sin estilos en línea en archivos MDX.

FlexContainer

Componente de contenedor Flexbox para organizar elementos en filas o columnas. Importar:

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

Props:

Propiedad	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido para mostrar
`direction`	`string`	`"row"`	No	Dirección flex: “row"	"column"	"row-reverse"	"column-reverse”
`gap`	`string`	`"1rem"`	No	Espacio entre elementos (valor CSS)
`align`	`string`	`"flex-start"`	No	Alinear elementos: “flex-start"	"center"	"flex-end"	"stretch”
`justify`	`string`	`"flex-start"`	No	Justificar contenido: “flex-start"	"center"	"flex-end"	"space-between"	"space-around"	"space-evenly”
`wrap`	`boolean`	`false`	No	Permitir salto de línea
`style`	`object`	`{}`	No	Estilos en línea adicionales

Ejemplos:

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

Componente de contenedor de CSS Grid para diseños en cuadrícula. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido para mostrar
`columns`	`string\|number`	-	No	Número de columnas o valor de CSS grid-template-columns
`gap`	`string`	`"1rem"`	No	Espacio entre elementos (valor de CSS)
`style`	`object`	`{}`	No	Estilos adicionales en línea

Ejemplos:

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>

Espaciador

Componente de espacio vertical o horizontal. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`size`	`string`	`"1rem"`	No	Tamaño de espacio (valor CSS)
`direction`	`string`	`"vertical"`	No	Dirección de espacio: “vertical"	"horizontal”

Ejemplos:

Vertical Spacing
Code

Card 1

Content

Card 2

Content

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

Tables

Primitivas de tabla

Componentes de tabla para mostrar datos estructurados sin estilos en línea.

StyledTable

Componente de tabla con conciencia de tema y soporte para variantes. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido de la tabla (thead, tbody, etc.)
`variant`	`string`	`"default"`	No	Variante de tabla: “default"	"bordered"	"minimal”
`style`	`object`	`{}`	No	Estilos en línea adicionales

Ejemplos:

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>

Props de TableRow:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Celdas de tabla
`header`	`boolean`	`false`	No	¿Es una fila de encabezado?
`hover`	`boolean`	`false`	No	Habilitar efecto de paso del mouse
`style`	`object`	`{}`	No	Estilos en línea adicionales

Props de TableCell:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido de celda
`align`	`string`	`"left"`	No	Alineación del texto: “izquierda"	"centro"	"derecha”
`header`	`boolean`	`false`	No	¿Es una celda de encabezado?
`style`	`object`	`{}`	No	Estilos en línea adicionales

Containers

Primitivas de contenedor

Componentes contenedores para agrupar y organizar contenido.

BorderedBox

Componente contenedor con borde consciente del tema. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido para mostrar
`variant`	`string`	`"default"`	No	Variante de borde: “default"	"accent"	"muted”
`padding`	`string`	`"1rem"`	No	Espaciado interno (valor CSS)
`borderRadius`	`string`	`"8px"`	No	Radio de borde (valor CSS)
`style`	`object`	`{}`	No	Estilos en línea adicionales

Ejemplos:

Default
Accent Variant
Code

This is a bordered box with default styling.

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

CenteredContainer

Componente de contenedor de contenido centrado. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido a mostrar
`maxWidth`	`string`	`"800px"`	No	Ancho máximo (valor CSS)
`padding`	`string`	`"0"`	No	Relleno interno (valor de CSS)
`style`	`object`	`{}`	No	Estilos adicionales en línea

Ejemplos:

Centered Content
Code

Centered Card

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

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

FullWidthContainer

Componente de contenedor de ruptura de ancho completo para secciones principales y contenido de ancho completo. Importar:

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

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido a mostrar
`backgroundColor`	`string`	-	No	Color de fondo (valor CSS o variable CSS)
`style`	`object`	`{}`	No	Estilos adicionales en línea

Ejemplos:

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

​Botones y Acciones

​DownloadButton

​BasicBtn

​Iconos y marca

​LivepeerIcon

​LivepeerIconFlipped

​LivepeerSVG

​LivepeerIconOld

​Enlaces y navegación

​GotoLink

​GotoCard

API Reference

Getting Started

​CustomCallout

​TipWithArrow

​LinkArrow

​Texto y tipografía

​Subtítulo

​CopyText

​CardTitleTextWithArrow

Card Title with Arrow

​AccordionTitleWithArrow

​Divisores

​CustomDivider

​Primitivas de diseño

​FlexContainer

Card 1

Card 2

Card 3

Item 1

Item 2

Centered

Centered

​GridContainer

Card 1

Card 2

Card 3

​Espaciador

Card 1

Card 2

​Primitivas de tabla

​StyledTable

​Primitivas de contenedor

​BorderedBox

​CenteredContainer

Centered Card

​FullWidthContainer

Next: Display Components

Botones y Acciones

DownloadButton

BasicBtn

Iconos y marca

LivepeerIcon

LivepeerIconFlipped

LivepeerSVG

LivepeerIconOld

Enlaces y navegación

GotoLink

GotoCard

CustomCallout

TipWithArrow

LinkArrow

Texto y tipografía

Subtítulo

CopyText

CardTitleTextWithArrow

AccordionTitleWithArrow

Divisores

CustomDivider

Primitivas de diseño

FlexContainer

GridContainer

Espaciador

Primitivas de tabla

StyledTable

Primitivas de contenedor

BorderedBox

CenteredContainer

FullWidthContainer