Text<mds-text>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
animationenumSpecifies if the text is animated when it is rendered
tagenumSpecifies the HTML tag of the element
truncateenumSpecifies if the text shoud be truncated or should behave as a normal text
typographyenumSpecifies the font typography of the element
variantenumSpecifies the variant for typography
textstringSpecifies the text string to the component instead of passing an HTML node
Overview
The <mds-text> web component is the foundational typography primitive of the Magma Design System. It decouples the semantic typography role of a piece of text from the HTML element that renders it, replacing raw heading, paragraph, label and inline tags (<h1>-<h6>, <p>, <span>, <label>, <code>, …) with a single design-tokenized text node that is consumed internally by nearly every other Magma component.
Semantic Behavior
Typography drives the rendered tag: when tag is left unset, a sensible default element is resolved from the chosen typography (e.g. typography="h2" -> <h2>, paragraph/detail -> <p>, label/option -> <label>, snippet/hack -> <code>, tip -> <div>). Setting tag explicitly overrides this.Semantics vs. visual style are independent: typography controls the visual ramp and the default element, but you may pin any allowed tag to keep the correct document outline (accessibility) while choosing a different visual scale.Text source is slot or prop: text is normally provided through the default slot. Passing the text prop renders that string instead of the slotted content - required for the animation path, since the animation watches the text value.Default-slot is text only: the default slot is intended for a plain text string; HTML elements or other components should not be slotted in.Animated reveal: with animation="yugop" the component runs a randomized character “decode” reveal whenever the text prop changes after load (the initial value is rendered as is); animation="none" (the default) skips all animation. The revealed string is always painted as text, never parsed as HTML.Animation tuning via CSS: the yugop reveal reads --mds-text-animation-speed and --mds-text-animation-placeholder-char, so speed and placeholder glyph are themeable through CSS custom properties rather than props. They are read each time a reveal starts, so a value changed after load applies to the next reveal. The placeholder is one character (a longer string keeps its first one); a speed that is not a positive number, or an empty placeholder, falls back to the defaults (0.5 and a space).
Properties & Visual Configurations
typography selects the semantic text role from the shared typography ramp (titles h1-h6 and action; informational detail, paragraph, caption, label, option, tip; monospaced snippet, hack). It is the primary prop and also determines the default rendered tag. Defaults to 'detail'.variant refines the tone of a typography role and is specific to this component - it is the typography variation ('title', 'info', 'read', 'code'), not the shared component tone/variant ladder. Only 'read' has a visual effect, and only on paragraph, detail and caption (it switches them to the reading family); the other values change nothing, and leaving it unset uses the role’s default styling.tag is an escape hatch to force a specific HTML element independently of typography, e.g. rendering a visually large heading as a <span> or marking text as <strong>/<em>/<mark> without changing the visual scale.truncate governs overflow clipping: 'word' forces single-line truncation (no wrapping), 'all' clamps to a multi-line block whose line count is controlled by --mds-text-line-clamp, and 'none' lets text flow normally.