Alert
You can edit 8 Components for free. Get premium for unlimited access.
Displays a callout for user attention.
Figma
The Notification component is used to communicate news in an app or to give direct feedback.
1. Reference
This component inherits props from the Notification.
2. Type
You can edit the type with the error, success, warning or info parameter.
Image 2.1 : Type error
Image 2.2 : Type info
Image 2.3 : Type warning
Image 2.4 : Type success
3. Close
You can edit the close with the true or false parameter.
Image 3.1 : Close true
Image 3.2 : Close false
Jetpack Compose
The Notification component is used to communicate news in an app or to give direct feedback.
1. Reference
This component inherits props from the Notification.
-
-
-
-
2. Type
You can edit the type with the NotificationType.error, NotificationType.success, NotificationType.warning or NotificationType.info parameter.
title = "Notification",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = NotificationType.error,
close = false,
action = {}
)
Notification(
title = "Notification",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = NotificationType.success,
close = false,
action = {}
)
Notification(
title = "Notification",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = NotificationType.warning,
close = false,
action = {}
)
Notification(
title = "Notification",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = NotificationType.info,
close = false,
action = {}
)
3. Close
You can edit the close with the .true or .false parameter.
title = "Notification",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
type = NotificationType.info,
action = {}
)
Preview
Preview
Code
const DlAlert(
title: 'Error alert',
description: 'Something went wrong while processing your request.',
variant: DlAlertVariant.error,
)Usage
Add this code example to your project to see how the component works.
DlAlert(
title: 'title',
description: 'description',
variant: DlAlertVariant.info,
onClose: () {},
},
)API Reference
DlAlert is a full-width alert component with token-based typography and spacing, variant-specific leading icons, and an optional dismissible close area.
Examples
Error
Preview
Code
const DlAlert(
title: 'Error alert',
description: 'Something went wrong while processing your request.',
variant: DlAlertVariant.error,
)Success
Preview
Code
const DlAlert(
title: 'Success alert',
description: 'Your action was completed successfully.',
variant: DlAlertVariant.success,
)Warning
Preview
Code
const DlAlert(
title: 'Warning alert',
description: 'Please review this value before continuing.',
variant: DlAlertVariant.warning,
)Information
Preview
Code
const DlAlert(
title: 'Info alert',
description: 'This is an informational message.',
variant: DlAlertVariant.info,
)With close-icon
Preview
Code
DlAlert(
title: 'Dismissible alert',
description: 'Click the close area on the right to hide this alert.',
variant: DlAlertVariant.info,
onClose: () {},
},
)Discover more content
You have questions or need help?
You want to try?
Save time and money?