Strong

Overview

The Strong component renders a styled <strong> element with Bulma helper class integration.

Use it for text that has strong importance, seriousness, or urgency. The <strong> element carries semantic meaning for screen readers and search engines.

info

For visual-only bold styling without semantic meaning, use the Span component with textWeight="bold" instead.

---

Import

import { Strong } from '@allxsmith/bestax-bulma';

---

Usage

Default Strong

The default usage renders bold text with semantic importance.

<Strong>Important text</Strong>

Colored Strong

Apply text color for additional emphasis.

<Strong textColor="primary">Primary strong text</Strong>

Danger Strong

Use danger color for warnings or critical information.

<Strong textColor="danger">Important warning!</Strong>

Strong with Background

Add background color and padding for a highlight effect.

<Strong bgColor="warning" p="1">
  Highlighted strong text
</Strong>

Inline with Text

Strong text works naturally inline within paragraphs.

<Paragraph>
  This is a paragraph with <Strong>strong text</Strong> in the middle. The
  strong text indicates <Strong textColor="primary">important</Strong> content.
</Paragraph>

All Colors

Display strong text in all Bulma theme colors.

<Block display="flex" flexDirection="column" gap="2">
  <Strong textColor="primary">Primary strong</Strong>
  <Strong textColor="link">Link strong</Strong>
  <Strong textColor="info">Info strong</Strong>
  <Strong textColor="success">Success strong</Strong>
  <Strong textColor="warning">Warning strong</Strong>
  <Strong textColor="danger">Danger strong</Strong>
</Block>

Callout Pattern

A common pattern for callouts with a strong lead word.

<Paragraph>
  <Strong>Note:</Strong> This is a pattern commonly used for callouts where the
  lead word is strong to draw attention.
</Paragraph>

---

Accessibility

• Semantic Importance: Screen readers typically announce <strong> content with additional emphasis.
• Appropriate Use: Use <strong> for content that is truly important, not just for visual styling.
• Color Contrast: When adding color, ensure sufficient contrast for readability.

info

The <strong> element indicates strong importance. For visual-only bold styling, use CSS or the Span component with textWeight="bold".

---

Related Components

• Emphasis: For semantically emphasized italic text.
• Span: For styled inline text without semantic meaning.
• Paragraph: For text paragraphs.
• Helper Props: Bulma helper props for spacing, color, etc.

---

Additional Resources

• MDN: strong element
• Storybook: Strong Stories

---

Props

Prop	Type	Default	Description
className	string	—	Additional CSS classes to apply.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color helper.
children	React.ReactNode	—	Content to render inside the strong element.
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Bulma declares these variables globally rather than on Strong's own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via className/style) for a one-off, or on :root to retheme every instance. See Theme.

CSS Variable	Sass Variable	Default
--bulma-strong-color	$strong-color	var(--bulma-text-strong)
--bulma-strong-weight	$strong-weight	var(--bulma-weight-semibold)