Medical Banner Box For Danger

Props

• label: string (required) -- accessible name applied via aria-label
• children: slot (required) -- the danger banner box content
• ...restProps: unknown -- additional attributes spread onto the <div> element

Keyboard Interactions

• None (passive layout element)

ARIA

• role="region" -- establishes the box as a landmark for assistive technology
• aria-label={label} -- provides an accessible name describing the danger information

When to Use

• Use inside MedicalBanner for danger-level information such as allergies, adverse drug reactions, warnings, or alarms
• Use to visually distinguish critical safety information from other banner content
• Use when clinicians need immediate visibility of life-threatening patient data
• Use for infection control alerts, fall risk warnings, or Do Not Resuscitate indicators

When Not to Use

• Do not use for general warnings outside a clinical context -- use WarningCallout instead
• Do not use outside MedicalBanner -- it relies on the parent for landmark and live region semantics
• Do not use for routine clinical information -- use MedicalBannerBoxForAdvice for contacts, plans, and context

Headless

This headless component provides a <div> with role="region", aria-label, and data-type="danger". The consumer is responsible for all CSS styling including background color (typically red/danger), text styling, and layout.

Styles

The consumer provides all CSS styling. The component renders with a .medical-banner-box-for-danger class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders a <div> element with class medical-banner-box-for-danger
• Verify role="region" is present
• Verify aria-label is set from the label prop
• Verify data-type="danger" is present
• Verify children content is rendered
• Verify pass-through attributes are applied

Advice

• Designers: Use a strong danger color (e.g., red background) to visually distinguish this from normal information. Ensure text contrast meets WCAG AAA requirements.
• Developers: Always provide a meaningful label prop that describes the danger information category (e.g., "Allergies and reactions", "Critical warnings").

Implementation Notes

• Renders a <div> element with class medical-banner-box-for-danger
• Uses role="region" and aria-label for accessibility
• Uses data-type="danger" attribute for consumer CSS targeting
• Uses children slot for flexible content rendering
• Spreads restProps onto the <div> element for consumer extensibility

Domain Knowledge

In clinical systems, danger-level information includes drug allergies, adverse reactions, critical alerts, and safety warnings that must be immediately visible to clinicians. This information is typically displayed with red or high-contrast styling per clinical UI conventions.

Related components

• announcement-banner — a banner highlighting important messages for all users
• banner — a prominent message bar across the top of a page
• banner-box — a banner box that is inside a banner component, using flexbox horizontal
• government-banner — a banner identifying a website as belonging to a government, with an expandable details panel
• medical-banner — a prominent message bar across the top of a page, with medical information
• medical-banner-box — a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information

References

• NHS UK Design System: https://service-manual.nhs.uk/design-system