Typography · Code

Code

Inline monospace text primitive. Renders {``} by default applying the foundation's --style-code-* tokens. Sits inline within prose — for keywords, identifiers, file names. Multi-line code blocks use the separate {``} primitive. Single part. Eidos-native: no soma backing, no semantic events.


		
			
				parts{compiled.parts.order.length}
			
			
				events0
			
			
				variants3
			
			
				sizes6
			
			
				scopeeidos



	
		
			
				Run the command
				
					{content}
				
				to start the dev server.
			
		
		
			trace
			{trace.length === 0 ? 'no semantic events' : `${trace.length} event(s)`}
			·
			variant
			{variant}
			
				size {size || 'inherit'} ·
				language {language || 'none'}
			
		
	

	
		
		
		
		
		
		
	

	{#if tab === 'live'}
		
			Controls
			
				Code is eidos-native — no soma split. The
				variant
				picks chrome treatment; size + color override the foundation defaults.
			

			
				eidos props · inline mono
			
			
				
					variant
					
						{#each variants as opt}
							
						{/each}
					
				
				
					size
					
						
						{#each sizes as opt}
							
						{/each}
					
				
				
					color
					
						
						{#each colors as opt}
							
						{/each}
					
				
				
					language reserved hint (data-language)
					
				
				
					content
					
				
			

			
			
				
					eidos
					visual · variant + axis overrides
					svelte
				
				{eidosSnippet}
			
		
	{/if}

	{#if tab === 'api'}
		
			API reference
			
				Code wraps inline monospace text. variant='plain' is the bare default;
				'soft' and 'outline' add chrome for surfacing from surrounding
				prose.
			

			Props
			
				
					Prop Type Default Notes
					
						variant 'plain' | 'soft' | 'outline' 'plain' Visual chrome.
						size 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' inherit Maps to {`var(--font-size-{key})`}.
						color 'primary' | 'secondary' | 'muted' | 'disabled' | 'on-solid' inherit Content-role color slot.
						language string — Reserved hint for future syntax-highlighting. Stamped as data-language.
						as string 'code' Override rendered tag.
						tagStyle string — Extra inline CSS.
					
				
			

			Composability examples
			
				
					Use case Snippet
					
						
							Inline command
							{`Run npm run dev
`}
						
						
							Soft-pill identifier
							{`USER_ID`}
						
						
							Outline shortcut hint
							{`Ctrl+K`}
						
						
							Inside a heading
							
								{`How useState works`}
							
						
						
							With language hint (future highlighting)
							{`readonly id: string`}
						
					
				
			

			Reference comparison
			
				
					Library Closest equivalent Difference
					
						radix-themes <Code> Radix has size + variant (solid/soft/outline/surface); UIX consolidates to 3.
						chakra-ui <Code> Chakra uses colorScheme; UIX restricts to content-role.
						mantine <Code> Mantine has block boolean; UIX splits into Code + CodeBlock.
						MDN <code> HTML primitive UIX wraps the native element with the foundation tokens.
					
				
			
		
	{/if}

	{#if tab === 'morfo'}
		
			Morfo contract
			
				
					Field Value
					
						name {codeMorfo.name}
						kebab {codeMorfo.kebab}
						scope {codeMorfo.scope.join(', ')}
						parts {partsList.length}
						events 0
					
				
			

			Parts
			
				
						{#each partsList as part}
							
						{/each}
					
					kebab marker element archetype optional
					
								{part.kebab}
								[{part.marker}]
								<{part.defaultElement}>
								{part.archetype}
								{part.optional ? 'yes' : 'no'}
							
				
			

			
				The Provider stamps data-code on the rendered tag (default
				{``}), plus data-variant and (when set) data-language.
			

		

	{/if}

	{#if tab === 'sema'}
		
			
				sema · events
			
			
				Code declares no semantic events. The primitive is passive — there is no commit, no
				emerge. If the consumer needs click-to-copy on inline code, they typically use the
				multi-line CodeBlock primitive instead.
			
		
	{/if}

	{#if tab === 'recipe'}
		
			Eidos recipe
			
				Recipe lives in src/uix/eidos/components/code/code.css. Base typography
				comes from --style-code-*; variants apply chrome through the
				data-variant selector.
			
			
				
					Selector Owner Purpose
					
						[data-code] morfo Provider marker. Base mono typography.
						{`[data-code][data-variant='soft']`} eidos Subtle background pill.
						{`[data-code][data-variant='outline']`} eidos Outlined pill.
					
				
			
		
	{/if}

	{#if tab === 'a11y'}
		
			Accessibility
			
				
					Concern Contract
					
						Role Native HTML {``} semantics — AT announce as "code".
						Inside prose Composes inline. AT read the surrounding text as a single utterance with the code embedded.
						Color contrast Soft / outline variants use neutral palette tokens that meet WCAG AA on the foundation surfaces.
						Language hint data-language is not announced by AT; it's a styling / tooling hint.
					
				
			
		
	{/if}

Prop	Type	Default	Notes
variant	'plain' \| 'soft' \| 'outline'	'plain'	Visual chrome.
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	inherit	Maps to {`var(--font-size-{key})`}.
color	'primary' \| 'secondary' \| 'muted' \| 'disabled' \| 'on-solid'	inherit	Content-role color slot.
language	string	—	Reserved hint for future syntax-highlighting. Stamped as `data-language`.
as	string	'code'	Override rendered tag.
tagStyle	string	—	Extra inline CSS.

Use case	Snippet
Inline command	{`Run npm run dev `}
Soft-pill identifier	{`USER_ID`}
Outline shortcut hint	{`Ctrl+K`}
Inside a heading	{`How useState works`}
With language hint (future highlighting)	{`readonly id: string`}

Library	Closest equivalent	Difference
radix-themes	`<Code>`	Radix has size + variant (solid/soft/outline/surface); UIX consolidates to 3.
chakra-ui	`<Code>`	Chakra uses `colorScheme`; UIX restricts to content-role.
mantine	`<Code>`	Mantine has `block` boolean; UIX splits into Code + CodeBlock.
MDN `<code>`	HTML primitive	UIX wraps the native element with the foundation tokens.

Field	Value
name	{codeMorfo.name}
kebab	`{codeMorfo.kebab}`
scope	{codeMorfo.scope.join(', ')}
parts	{partsList.length}
events	0

Selector	Owner	Purpose
`[data-code]`	morfo	Provider marker. Base mono typography.
{`[data-code][data-variant='soft']`}	eidos	Subtle background pill.
{`[data-code][data-variant='outline']`}	eidos	Outlined pill.

Concern	Contract
Role	Native HTML {``} semantics — AT announce as "code".
Inside prose	Composes inline. AT read the surrounding text as a single utterance with the code embedded.
Color contrast	Soft / outline variants use neutral palette tokens that meet WCAG AA on the foundation surfaces.
Language hint	`data-language` is not announced by AT; it's a styling / tooling hint.