DAlert
A flexible alert component for displaying contextual feedback messages.
Import
import { DAlert } from '@dynamic-framework/ui-react';
TypeScript Interface
type Props = BaseProps & PropsWithChildren<{
id?: string;
color?: ComponentStateColor;
icon?: string;
iconFamilyClass?: string;
iconFamilyPrefix?: string;
iconMaterialStyle?: boolean;
showClose?: boolean;
iconClose?: string;
iconCloseFamilyClass?: string;
iconCloseFamilyPrefix?: string;
iconCloseMaterialStyle?: boolean;
onClose?: () => void;
}>;
type ComponentStateColor = 'success' | 'danger' | 'warning' | 'info';
type BaseProps = {
style?: CSSProperties;
className?: string;
dataAttributes?: DataAttributes;
};
Props
Unique identifier for the alert element.
color
ComponentStateColor
default:"success"
Alert color variant. Options: 'success', 'danger', 'warning', 'info'.
Icon to display at the start of the alert. If not provided, uses default icon for the color variant.
CSS class for the icon font family.
Prefix for the icon font family.
Whether to use Material Design style for the icon.
Whether to display a close button.
Icon to use for the close button. Defaults to context icon if not provided.
CSS class for the close icon font family.
Prefix for the close icon font family.
Whether to use Material Design style for the close icon.
Callback function triggered when the close button is clicked.
Additional CSS classes to apply to the alert.
Inline styles to apply to the alert.
dataAttributes
Record<`data-${string}`, string | number | undefined | null | boolean>
Custom data attributes to add to the alert element.
Content to display inside the alert.
Usage Examples
Basic Alert
import { DAlert } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<DAlert color="success">
Your changes have been saved successfully!
</DAlert>
);
}
import { DAlert } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [show, setShow] = useState(true);
if (!show) return null;
return (
<DAlert
color="warning"
showClose
onClose={() => setShow(false)}
>
Please review your information before continuing.
</DAlert>
);
}
Custom Icon Alert
import { DAlert } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<DAlert
color="info"
icon="info-circle-fill"
iconFamilyClass="bi"
>
This feature is currently in beta.
</DAlert>
);
}
All Color Variants
import { DAlert } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex flex-column gap-3">
<DAlert color="success">
Success: Operation completed successfully!
</DAlert>
<DAlert color="danger">
Error: Something went wrong.
</DAlert>
<DAlert color="warning">
Warning: Please check your input.
</DAlert>
<DAlert color="info">
Info: Here's some helpful information.
</DAlert>
</div>
);
}