FluxMarkdown

Renders a Markdown source string as a prose block. The renderer sanitises HTML. Use proseStyle=compact for dense copy (tooltips, help), default for body text, spacious for long-form articles. Reach for plain UI.text for one-line labels — Markdown is overhead you don’t need.

Extends: Text (a2ui/basic@0.10)

Category: primitive

Props

Name	Type	Required	Default
accessibility	object	no	``
component	'FluxMarkdown'	yes	``
id	string	yes	``
proseStyle	'compact' | 'default' | 'spacious'	yes	'default'
size	'sm' | 'md' | 'lg'	yes	'md'
source	string	yes	``

Examples

Short inline help with bold + code formatting.

UI.markdown("**Tip:** press Cmd+K to open the quick-switcher.")

Full documentation snippet rendered spaciously.

UI.markdown(help_article, proseStyle="spacious", size="md")

Anti-patterns

Avoid: Raw HTML (especially scripts) must be stripped by the renderer. Don’t rely on Markdown to pass HTML through; it won’t.

UI.markdown("<script>alert('xss')</script>")

Avoid: Use UI.text for single-word labels. Markdown adds a parsing step with no payoff.

UI.markdown("Email")   # one-line label

Tokens used

• $color.text.primary

• $space.2

• $space.3

• $space.4

• $typography.family.sans

• $typography.lineHeight.normal

• $typography.lineHeight.relaxed

• $typography.size.lg

• $typography.size.md

• $typography.size.sm

Basic-catalog fallback

• Component: Text

• Prop map: source → text

• Notes: Basic renderers lose markdown formatting; raw source is shown as plain text.