Todos los componentes (204)

Código en línea

Tipografía · Code

Qué es y cuándo usarlo

Un trozo de código DENTRO de una frase: un nombre de variable, una ruta, un valor, un comando.

Las otras piezas que van dentro de un texto tienen su propia ficha: Kbd (Tecla), Mark (Resaltado), Highlight (Resaltar coincidencias) y Blockquote (Cita).

Cuándo usarlo

Un nombre de variable, una ruta o un valor dentro de un texto: «Lanza npm run verify antes de subir».
Su tamaño es relativo (0.9em) y no un escalón de la escala, así que sigue al texto que lo rodea en vez de imponer el suyo. Un valor largo parte de línea donde haga falta en vez de salirse de la caja.

Cuándo no

Un bloque de código de varias líneas con numeración y copiar: CodeBlock.
Una tecla o un atajo: Kbd.
Una etiqueta de estado suelta: Tag; un contador encima de un icono: Badge.

Teclado: no participa. No es interactivo.

Accesibilidad: es un <code> de verdad, con la letra monoespaciada del tema. Respeta los espacios del texto (white-space: break-spaces), así que lo que se lee es exactamente lo que hay que escribir.

Aspecto fino: --amset-code-inline-background, --amset-code-inline-color y --amset-code-inline-border.

Cómo se ve

Para comprobarlo todo se lanza npm run verificar antes de subir la rama.

El color de marca sale de --amset-accent, y el tema, del atributo data-theme.

<Text>
  Para comprobarlo todo se lanza <Code>npm run verificar</Code> antes de subir la rama.
</Text>

Props

Se importa con import { Code } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech:

Interactivo