Strong

Usage

• Use Strong to mark text with bold, visual importance — names, counts, actions, or key terms the user must be aware of. It renders the native <strong> tag.
• Reach for Strong especially when the marked text relates to a destructive action the user may take.
• Highlight the specific item being affected when asking the user to confirm a destructive or significant action, so they can verify the target before confirming.
• Use Strong for the label in key-value metadata patterns, where the label needs to stand out from its value.
• Use Text with a heavier weight instead when the goal is visual hierarchy alone and semantic importance is not required.
• Use Emphasis instead when the text carries stressed emphasis rather than importance — it renders <em> with an italic font style, while Strong uses a heavier font weight for important, serious, or urgent text.

Content

• Emphasize only the key term or value. Never wrap entire sentences or large phrases in Strong.
• Apply Strong sparingly and with the fewest words needed to make the intent clear — extra words inside the emphasis scope make the page harder to scan.
• Keep metadata labels concise and follow them with a colon.

Implementation Notes

• Strong extends Text and inherits every Text prop (text, size, weight, color, family, fontStyle) plus Box layout and sprinkle props.
• weight defaults to "semibold" and color defaults to "inherit", so Strong picks up the surrounding text color rather than Text's base color. Override color only where the color carries meaning.
• The text prop is a predefined typography style token (e.g. "product-p"), not the string content — content always comes from the default block.
• The element is polymorphic via as and defaults to strong. Setting it decouples the rendered tag from the semantics — leave it unset so the <strong> meaning is preserved.
• React: pass content as children — <Strong>Springfield campaign</Strong>.
• Ember: pass content via {{yield}} (default block) — <PlumaStrong>Springfield campaign</PlumaStrong>.