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
import Alert from '../components/ui/Alert';
<Alert
type="error"
title="Error"
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
stay={true}
closeIcon={false}
/>Installation
Use this command to install the component in your project.
dynamiclayer add alertUsage
Add this code example to your project to see how the component works.
import Alert from '../components/ui/Alert';// Basic usage
<Alert
type="success"
title="Success!"
description="Your changes have been saved."
/>
// Alert that stays visible
<Alert
type="error"
title="Error"
description="Something went wrong."
stay={true}
/>
// Alert without close icon
<Alert
type="information"
title="Info"
description="New updates available."
closeIcon={false}
/>Examples
Error
Preview
Code
import Alert from '../components/ui/Alert';
<Alert
type="error"
title="Error"
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
stay={true}
closeIcon={false}
/>Success
Preview
Code
import Alert from '../components/ui/Alert';
<Alert
type="success"
title="Success"
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
stay={true}
closeIcon={false}
/>Warning
Preview
Code
import Alert from '../components/ui/Alert';
<Alert
type="warning"
title="Warning"
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
stay={true}
closeIcon={false}
/>Information
Preview
Code
import Alert from '../components/ui/Alert';
<Alert
type="information"
title="Notification"
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
stay={true}
closeIcon={false}
/>With close-icon
Preview
Code
import Alert from '../components/ui/Alert';
<Alert
type="informaton"
title="Notification"
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
stay={true}
/>Discover more content
You have questions or need help?
You want to try?
Save time and money?