Message Box
Message Boxes provide contextual system feedback for user actions, conveying information, warnings, errors, or success states with clarity and emphasis.
Quick Links
Installation
Install the message-box individually or as part of the complete @aristobyte-ui library.
Installation of Message Box
The above command installs the Message Box component individually. You may skip this step if @aristobyte-ui is already installed globally.
Package Manager
Individual Package
Install only the message-box if you need specific functionality.
Full Library
Skip this if you have the complete @aristobyte-ui already installed.
Import
Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.
Import Message Box
The Message Box component delivers user-facing alerts with semantic clarity and visual consistency. Import it as shown below to streamline notification delivery in your application:
Import Method
Individual Package
Import directly from the message-box package for optimal tree-shaking and smaller bundle sizes.
Recommended for component-specific usage
Global Library
Import from the main library package when using multiple components from AristoByte UI.
Recommended for component-specific usage
Basic Usage Example
Basic implementation of the component using default properties. Suitable for general-purpose interactions.
Message Box Variants
AristoByte UI supports various message box types including info, success, warning, and error. Each type maps to a specific context and visual tone, ensuring users immediately understand the nature of the message.
Preview
Default message box
Info message box
Warning message box
Success message box
Error message box
Guidelines
Use semantic variants to match message intent.
Prefer neutral/info for non-blocking notifications.
Select success for completed flows and error for actionable failures.
Use warning for recoverable states that require user attention but not immediate interruption.
When to Use
Do not use success/error for purely informational content.
Keep messages concise with a clear remediation path.
Provide clear CTA or link to remediation when the message signals user action.
Expose machine-readable codes (data-error-code) to facilitate automated monitoring.
Remediation & UX
Message Box Types
Choose between solid, outline, outline-dashed, no-outline and glowing styles to align with your UI aesthetic and message urgency. Variants control emphasis and contrast for better UX alignment.
Preview
Solid message box type
Glowing message box type
Outline message box type
Dotted outline message box type
No-outline message box type
Guidelines
Use solid for blocking/high-emphasis alerts.
Use outline/no-outline for inline, low-noise hints.
Prefer dashed outlines for provisional or beta notices to indicate lower fidelity.
Use glowing types only when the notification needs to break out of dense UI without modalizing the experience.
When to Apply
Avoid glowing in high-density enterprise screens.
Ensure outlined types maintain sufficient contrast.
Consistently apply padding and margin tokens across types to avoid layout drift.
Make sure visual weight of type matches its semantic urgency to avoid false alarms.
Design Considerations
Message Box Radius
Control the border curvature of the Message Box using predefined radius values — none, sm, md, lg, and full. This allows for seamless adaptation to different UI aesthetics, whether you're aiming for sharp, modern edges or fully rounded surfaces.
Preview
No radius
Small radius
Medium radius
Large radius
Full radius
Guidelines
Match radius with surrounding card/panel geometry.
Use full for pill-like banners when space allows.
Prefer consistent radius tokens across notification stacks to prevent visual clutter.
When using full radius, ensure clipping does not hide important message content.
Visual Alignment
Avoid mixing multiple radii within one notification stack.
Respect container clipping for overflowed radii.
Test radius combinations on responsive breakpoints to prevent overlap with container edges.
Document radius trade-offs for dense dashboards vs marketing surfaces.
Best Practices
Message Box Without Icon
A minimal version of the message box component that omits the icon by default. The withIcon prop is set to false unless explicitly enabled, offering a cleaner layout when visual indicators are unnecessary.
Preview
Message box without icon
Guidelines
Use for low-severity, passive information.
Prefer in dense layouts where space is constrained.
Use icon-less variants for compact lists of system messages to reduce visual density.
Prefer without-icon in high-volume notification feeds to maintain scanning efficiency.
When to Use
Ensure copy provides sufficient context without an icon.
Do not remove icons for critical alerts.
Add succinct actionable copy or link to compensate for the missing visual cue.
Run readability checks on multi-locale content when icons are omitted to ensure clarity.
Content Strategy
Props Reference
Complete reference for all props available on MessageBox component(s), including type definitions, default values, and usage examples.
MessageBox
Core Props
children
React.ReactElement | React.ReactNode | stringdefault: ''
Visual Props
variant
'default' | 'info' | 'warning' | 'success' | 'error'default: 'default'
radius
'none' | 'sm' | 'md' | 'lg' | 'full'default: 'md'
type
'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing'default: 'outline'
withIcon
booleandefault: false
Advanced Props
customIcon
className
stringdefault: ''
style
React.CSSPropertiesdefault: {}