--- title: "Código en línea" description: "Un tramo de código dentro de una frase, en el tipo de letra de código y al tamaño del texto que lo rodea, sobre un relleno tenue o sin él. Es texto, nunca un control." url: "https://tanrei.chnotchy.com/es/components/inline-code/" last_updated: 2026-10-23T21:17:12.000Z --- # Código en línea > Un tramo de código dentro de una frase, en el tipo de letra de código y al tamaño del texto que lo rodea, sobre un relleno tenue o sin él. Es texto, nunca un control. ## Descripción general El código en línea nombra dentro de una frase algo que viene del código: un comando, una propiedad, un archivo, un valor. Las líneas de código que se leen y se copian son un [bloque de código](https://tanrei.chnotchy.com/es/components/code-block/). Las teclas que hay que pulsar son un [atajo de teclado](https://tanrei.chnotchy.com/es/components/keyboard-shortcut/), que lee en voz alta los nombres de los modificadores. ### Uso En la web, el código en línea es una clase que pones en tu propio elemento `code`, no un elemento. El texto está en el documento, así que los buscadores, la búsqueda en la página y la copia funcionan antes de que se ejecute ningún script. Todos los `code` dentro de `.tanrei-prose` que no están en un `pre` se dibujan igual sin necesidad de la clase, así que el Markdown renderizado no necesita nada. SwiftUI, Compose, Flutter y React Native están planificados: los nombres que figuran junto a cada plataforma al principio de esta página son los que les da la especificación, y todavía no se distribuye nada para ellos. **Web** ```html

Ejecuta primero npm install.

comp.button.container.shape
variantfilled
``` **React** ```tsx import '@tanrei/web/code.css';

Ejecuta primero npm install.

``` | Propiedad | En la web | | --- | --- | | `text` | El propio contenido del elemento | | `variant: tonal` | `data-variant="tonal"` | | `variant: plain` | `data-variant="plain"` | | `variant: auto` (el valor predeterminado) | Sin atributo. Elige el ancestro más cercano con `data-tanrei-code="plain"` o `"tonal"`, y es tonal donde ninguno lo hace | ## Especificaciones El código en línea no tiene tamaño propio. Su tamaño de fuente es el del texto en el que está, multiplicado por una proporción (`comp.inline-code.label.scale`) que iguala el tipo de letra de código y el del texto. En el texto de cuerpo es 13 junto a 14. En un encabezado es el tamaño del propio encabezado. Nunca hace más alta su línea. El relleno es tan alto como la caja de texto del propio tipo de letra de código y no tiene margen interior ni arriba ni abajo. Un tramo salta de línea con su línea. Se parte primero por sus espacios. Una parte sin espacios que es más larga que la línea se parte entre caracteres, y no se añade ningún guion, porque un guion cambiaría el código. Nunca se corta y nunca se desplaza. Dentro de un enlace toma el color del enlace, y el subrayado del enlace pasa por debajo de él. Dentro de texto fuerte es un paso de peso más grueso. Nunca se inclina. Siempre se dispone de izquierda a derecha, como un tramo aparte, también en una frase de derecha a izquierda. - Category: Communication - Level: base - Listing: default - Page: https://tanrei.chnotchy.com/components/inline-code/ - Spec: https://github.com/chnotchy/tanrei/blob/main/specs/inline-code.spec.json ### Availability | Design system | Has it | Notes | | --- | --- | --- | | Tanrei (`tanrei`) | Yes | — | | Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — | | M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — | | M3-like (Material 3-inspired) (`m3-like`) | Yes | — | ### Platforms - Web: the class `tanrei-code` on the product's own element, styled by `@tanrei/web/code.css`. | Platform | Name | Status | | --- | --- | --- | | Web | `tanrei-code` | lagging | | SwiftUI | `TanreiInlineCode` | planned | | Jetpack Compose | `TanreiInlineCode` | planned | | Flutter | `TanreiInlineCode` | planned | | React Native | `InlineCode` | planned | Names a platform gives in its own idiom: | Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native | | --- | --- | --- | --- | --- | --- | | `text` (prop) | `textContent` | `text` | `text` | `text` | `children` | | `variant` (prop) | `data-variant` | `variant` | `variant` | `variant` | `variant` | Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal. ### Anatomy - `container` (optional): The fill behind the text in the tonal form: as tall as the code face's own text box, with small corners and a little room at each end of every piece of the run. Decorative; the plain form has none. - `label`: The code: its characters exactly as given, in the code face. - `outline` (optional): An edge around the fill, where a design system gives it a width. The default system draws none. ### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | `""` | The code: the characters exactly as they are to be read and copied ("npm install", "comp.button.container.shape"). Spaces inside it are kept. | | `variant` | `enum`: `auto`, `tonal`, `plain` | `"auto"` | How the run is set apart. tonal: the code face on a faint fill. plain: the code face alone, in the color of the text around it, for a column or a list whose every entry is code and for text on a colored container. auto, the default, takes what the nearest ancestor chooses for the inline code inside it, and tonal where none does. | ### States `enabled` ### Accessibility - Role: `code` - Labeling: Inline code has no name of its own: it is text, read in its sentence. Its role is code where the platform has one (the web's code element); elsewhere it is plain text. Nothing announces its form. - Minimum target size: yes - Not interactive: inline code takes no input and no focus (ICD-11), so there is no target to size; minimumTarget holds trivially. Inside a link it is part of that link's text and target. - Told from the words around it by its face, not by color (WCAG 1.4.1): the fill is decorative, and the plain form and forced colors (ICD-14) draw none. - Contrast in the default system: the tonal form's text is on-surface on surface-container-highest, and a link's color on that fill is held at the same ratio — both by the token invariants that hold text roles at 4.5:1 on every surface (7:1 in the high-contrast schemes). The plain form has the contrast of the text it sits in. - The tonal form's fill is a surface role, so it is correct on a surface. On a colored container (a callout, an inverse tooltip, a filled button) the text color of ICD-3 is not paired with that container's content color: use plain there. A component that hosts text on such a container chooses plain for the inline code inside it (ICD-5). - Screen readers do not announce the code role by default, so a sentence must make sense when the code is read as words. Symbols are read as the person's settings say; write a name out in the sentence where its spelling matters. - It reflows (WCAG 1.4.10): a long name breaks rather than scroll the page (ICD-6, ICD-15). No hyphen is added, because a hyphen would change the code. - Keys to press are a keyboard shortcut, which reads modifier names aloud; inline code would read the characters. ### Behaviour Requirements in EARS form, each with its stable id. - **ICD-1** THE inline code SHALL set its text in the family, the weight and the letter spacing of comp.inline-code.label.typescale, at the font size of the text it sits in multiplied by comp.inline-code.label.scale — whatever that text is: a paragraph, a heading of any level, a lead paragraph, a caption, a label, a table cell — and SHALL NOT take the font size or the line height of the code role itself. - **ICD-2** THE inline code SHALL sit on the baseline of the text it is part of, as a part of that text's line, and SHALL NOT make that line taller or change the distance between lines (PRS-17); its fill, where it has one, SHALL be as tall as the code face's own text box (from its ascent to its descent at the drawn size) and SHALL NOT be padded above or below. - **ICD-3** WHILE the inline code is drawn tonal (ICD-5) THE inline code SHALL draw behind its text a fill of comp.inline-code.container.color with corners comp.inline-code.container.shape eased by sys.shape.corner-smoothing, extend that fill by comp.inline-code.container.padding-inline before the first and after the last character, draw its text in comp.inline-code.label.color, and, where comp.inline-code.outline.width is above 0, draw an edge of that width in comp.inline-code.outline.color inside the fill; it SHALL draw no elevation. - **ICD-4** WHILE the inline code is drawn plain (ICD-5) THE inline code SHALL draw no fill, no edge and no padding, and SHALL draw its text in the color of the text it sits in, so that it reads on any container that text reads on. - **ICD-5** WHILE variant is tonal or plain THE inline code SHALL be drawn in that form; WHILE variant is auto THE inline code SHALL be drawn in the form the nearest ancestor chooses for the inline code inside it (a table whose column is code, a callout, a list of names), and tonal where no ancestor chooses one; WHEN that choice changes while the inline code is shown THE inline code SHALL follow it at once. - **ICD-6** THE inline code SHALL wrap with the line it sits in: it breaks first at the spaces inside it; a part with no space that is longer than the line SHALL break between any two characters rather than run past the edge of its container; and no hyphen or any other character SHALL be drawn at a break. Each piece of a run that breaks SHALL keep the fill, the corners and both paddings of ICD-3. THE inline code SHALL NOT cut its text and SHALL NOT scroll. - **ICD-7** THE inline code SHALL draw the characters of text as given: every space is kept, a run of spaces is not collapsed, a line break in text is drawn as one space, and the text is not hyphenated, not capitalised or otherwise transformed, not translated by the platform's translation, not spell-checked and not turned into a link by itself. - **ICD-8** THE inline code SHALL lay out its text as a left-to-right run of its own, isolated from the text around it, in every layout direction (PRS-26): a path, a call and an operator keep their order inside a right-to-left sentence and reorder nothing beside them; the run takes its place in the sentence by the sentence's own direction. - **ICD-9** THE inline code SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the inline code is shown THE inline code SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows. - **ICD-10** WHERE the inline code sits inside a link THE inline code SHALL draw its text in the link's color in place of comp.inline-code.label.color and the link's underline SHALL run under it; WHERE it sits inside strong text it SHALL gain sys.typescale.emphasis.body of weight over the weight of comp.inline-code.label.typescale, as strong text does (PRS-2); WHERE it sits inside emphasised text it SHALL NOT be slanted. - **ICD-11** THE inline code SHALL NOT take pointer, touch or keyboard input of its own, SHALL NOT take focus or be a stop in the focus order, and SHALL NOT change anything it draws under a pointer, a press or focus: it has no hovered, focused, pressed, selected or disabled state, draws no state layer and no focus indicator, and emits no event. WHERE it is placed inside an element that takes input (a link, a button, a list item) input over it SHALL reach that element, which draws its own states. - **ICD-12** THE inline code SHALL expose its text as text, read where it sits in the sentence, with the role of code where the platform has one and no name of its own; it SHALL NOT be announced as anything else and SHALL NOT expose its form. Selecting it SHALL select its characters with the text around it, and copying that selection SHALL yield exactly text: no character stands for the padding of ICD-3. - **ICD-13** THE inline code SHALL draw all of its text in one color: it takes no syntax roles and SHALL NOT highlight, parse or otherwise interpret what it holds. - **ICD-14** WHERE the platform draws with a person's own forced colors THE inline code SHALL draw its text in the platform's text color (the link color inside a link) and no fill, and an edge only where comp.inline-code.outline.width is above 0, in that text color: the face tells code from words, so nothing rests on the fill. - **ICD-15** WHILE the text size is enlarged THE inline code SHALL grow with the text it sits in, keeping the proportion of ICD-1, its padding and its corners; at twice the text size in a container 320 wide it SHALL wrap as ICD-6 says and SHALL NOT cause horizontal scrolling. - **ICD-16** IF text is empty THE inline code SHALL draw nothing, take no space and expose nothing. WHEN variant names a value this spec does not have THE inline code SHALL be drawn as variant auto, and in debug builds report the unknown value. ### Tokens As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.inline-code.…` → `--tanrei-comp-inline-code-…`). #### `tanrei.comp.inline-code` | Token | Type | Value | | --- | --- | --- | | `comp.inline-code.container.color` | `color` | `{tanrei.sys.color.surface-container-highest}` | | `comp.inline-code.container.shape` | `dimension` | `{tanrei.sys.shape.corner.extra-small}` | | `comp.inline-code.container.padding-inline` | `dimension` | `{tanrei.sys.space.space50}` | | `comp.inline-code.outline.color` | `color` | `{tanrei.sys.color.outline-variant}` | | `comp.inline-code.outline.width` | `dimension` | `{tanrei.sys.space.space0}` | | `comp.inline-code.label.color` | `color` | `{tanrei.sys.color.on-surface}` | | `comp.inline-code.label.typescale` | `typography` | `{tanrei.sys.typescale.code}` | | `comp.inline-code.label.scale` | `number` | `0.9286` | ### Qué dibuja la web de otra manera - `translate="no"` y `spellcheck="false"` son atributos tuyos, o de tu renderizador de Markdown. Una hoja de estilos no puede definirlos. - Un guion en el código es un lugar donde puede terminar una línea, antes de que el tramo se parta entre caracteres. - WebKit dibuja el relleno y las esquinas de cada trozo de un tramo que salta de línea, pero no el espacio de cada extremo: los trozos posteriores al primero empiezan en el borde del relleno. - Un salto de línea dentro del tramo se dibuja como un solo espacio únicamente en los navegadores que admiten `white-space-collapse: preserve-spaces`. Escribe cada tramo en una sola línea. - Un `data-variant` desconocido se dibuja como `auto`, y las compilaciones de depuración no notifican nada. ## Pautas ### Tonal o plain | Variante | Qué dibuja | Úsalo cuando | | --- | --- | --- | | **Tonal** | El tipo de letra de código sobre un relleno tenue | Un nombre en el texto corrido | | **Plain** | Solo el tipo de letra de código, en el color del texto que lo rodea | Una columna o una lista en la que todas las entradas son código, y un texto sobre un contenedor de color | ### Recomendado - Escribe la frase de modo que se entienda cuando el código se dice como palabras. Los lectores de pantalla no anuncian el rol de código de forma predeterminada. - Usa plain sobre un contenedor de color, como un contenedor de estado o una superficie inversa. El relleno tonal es un rol de superficie y solo se empareja con superficies. - Elige la variante una sola vez en el ancestro (`data-tanrei-code="plain"`) para una tabla o una lista de nombres. ### Evita - No uses el código en línea para dar énfasis. Dice «esto es código». - No pongas en código en línea las teclas que hay que pulsar. Usa un atajo de teclado. - No pongas en él más de una línea. Usa un bloque de código. ## Accesibilidad ### De qué se encarga el componente - Es el elemento `code`, así que tiene el rol de código, y su texto se lee donde está dentro de la frase. - Se distingue de las palabras que lo rodean por su tipo de letra, no por el color. Con colores forzados el relleno desaparece y no se pierde nada. - No recibe foco ni entrada. Dentro de un enlace o de un botón, una pulsación sobre él llega a ese elemento. - Un nombre largo se parte en lugar de hacer que la página se desplace, con cualquier tamaño de texto. - Al seleccionar y copiar una frase, los caracteres del código se copian exactamente. ### Qué debes hacer tú - Escribe un nombre con todas sus letras en la frase cuando su grafía importe, porque los símbolos se leen según los ajustes de cada persona. - Marca el tramo con `translate="no"` para que la traducción del navegador no lo toque.