Alert

New version v0.0.1 🚀

The Alert and Flash Message component in Phoenix LiveView displays static alerts and dynamic flash messages, including flash groups, for clear and effective user communication.

Installation:

mix mishka.ui.gen.component alert

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

Overview of the Phoenix and LiveView Alert Component

The Mishka Chelekom Alert module offers a wide variety of styles and colors. It helps you manage important messages by offering a clean and functional way to display real-time feedback. Support components like Flash , Flash Group which allows you to group multiple flash messages together, making it easy to manage different types of notifications in one place.

The Mishka Chelekom Alert component integrates seamlessly with Phoenix LiveView applications, offering real-time notifications and enhanced interactivity. With this Phoenix LiveView component , users can receive alerts instantly, whether it’s for success, error, or informational messages. The module’s flexibility in styles and colors ensures it blends perfectly with any design. The Flash and Flash Group components provide efficient ways to display temporary messages and group multiple notifications in an organized, collapsible format, ensuring a cleaner and more streamlined user interface.

In this component, there is no color prop. Instead, we use the kind prop, which is of atom type, to choose the colors of different variants. It's a required prop, so you must specify which color you want to use.

Default Variant

The default style of the Mishka Chelekom alert applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles.

Natural

White

Dark

Info

Success

Warning

Danger

Silver

Misc

Dawn

Primary

Secondary

<.alert kind={:natural}>Natural</.alert>

<.alert kind={:white}>White</.alert>

<.alert kind={:pridarkmary}>Dark</.alert>

<.alert kind={:primary}>Primary</.alert>

<.alert kind={:secondary}>Secondary</.alert>

<.alert kind={:success}>Success</.alert>

<.alert kind={:warning}>Warning</.alert>

<.alert kind={:danger}>Danger</.alert>

<.alert kind={:info}>Info</.alert>

<.alert kind={:silver}>Silver</.alert>

<.alert kind={:misc}>Misc</.alert>

<.alert kind={:dawn}>Dawn</.alert>

Outline Variant

The outline style of the Mishka Chelekom alert features a border. Using a single setting, you can choose from various color variants to suit your design needs.

Natural

Info

Success

Warning

Danger

Silver

Misc

Dawn

Primary

Secondary

<.alert variant="outline" kind={:natural}>Natural</.alert>

<.alert variant="outline" kind={:primary}>Primary</.alert>

<.alert variant="outline" kind={:secondary}>Secondary</.alert>

<.alert variant="outline" kind={:success}>Success</.alert>

<.alert variant="outline" kind={:warning}>Warning</.alert>

<.alert variant="outline" kind={:danger}>Danger</.alert>

<.alert variant="outline" kind={:info}>Info</.alert>

<.alert variant="outline" kind={:silver}>Silver</.alert>

<.alert variant="outline" kind={:misc}>Misc</.alert>

<.alert variant="outline" kind={:dawn}>Dawn</.alert>

Shadow Variant

The shadow variant of the Mishka Chelekom alert is similar to the default variant, but it also includes a subtle shadow along with a border and natural background in silver mode.

Natural

Info

Success

Warning

Danger

Silver

Misc

Dawn

Primary

Secondary

<.alert variant="shadow" kind={:natural}>Natural</.alert>

<.alert variant="shadow" kind={:primary}>Primary</.alert>

<.alert variant="shadow" kind={:secondary}>Secondary</.alert>

<.alert variant="shadow" kind={:success}>Success</.alert>

<.alert variant="shadow" kind={:warning}>Warning</.alert>

<.alert variant="shadow" kind={:danger}>Danger</.alert>

<.alert variant="shadow" kind={:info}>Info</.alert>

<.alert variant="shadow" kind={:silver}>Silver</.alert>

<.alert variant="shadow" kind={:misc}>Misc</.alert>

<.alert variant="shadow" kind={:dawn}>Dawn</.alert>

Bordered Variant

The Bordered variant of the Mishka Chelekom alert has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.

Natural

Dark

Info

Success

Warning

Danger

Silver

Misc

Dawn

Primary

Secondary

<.alert variant="bordered" kind={:natural}>Natural</.alert>

<.alert variant="bordered" kind={:white}>White</.alert>

<.alert variant="bordered" kind={:dark}>Dark</.alert>

<.alert variant="bordered" kind={:primary}>Primary</.alert>

<.alert variant="bordered" kind={:secondary}>Secondary</.alert>

<.alert variant="bordered" kind={:success}>Success</.alert>

<.alert variant="bordered" kind={:warning}>Warning</.alert>

<.alert variant="bordered" kind={:danger}>Danger</.alert>

<.alert variant="bordered" kind={:info}>Info</.alert>

<.alert variant="bordered" kind={:silver}>Silver</.alert>

<.alert variant="bordered" kind={:misc}>Misc</.alert>

<.alert variant="bordered" kind={:dawn}>Dawn</.alert>

Gradient Variant

The gradient variant of the Mishka Chelekom badge has gradients in various colors.

Natural

Info

Success

Warning

Danger

Silver

Misc

Dawn

Primary

Secondary

<.alert variant="gradient" kind={:natural}>Natural</.alert>

<.alert variant="gradient" kind={:primary}>Primary</.alert>

<.alert variant="gradient" kind={:secondary}>Secondary</.alert>

<.alert variant="gradient" kind={:success}>Success</.alert>

<.alert variant="gradient" kind={:warning}>Warning</.alert>

<.alert variant="gradient" kind={:danger}>Danger</.alert>

<.alert variant="gradient" kind={:info}>Info</.alert>

<.alert variant="gradient" kind={:silver}>Silver</.alert>

<.alert variant="gradient" kind={:misc}>Misc</.alert>

<.alert variant="gradient" kind={:dawn}>Dawn</.alert>

Flash component in Phoenix Liveview

The Phoenix flash component in the Mishka Chelekom library allows you to display real-time flash messages, such as success, error, or warning notifications, within your application. It supports customizable variants, sizes, positions, and icons, making it adaptable to various design needs. With built-in Phoenix LiveView integration, the component provides interactive features like dismissing alerts and dynamic content updates, enhancing the user experience.

Mishka Chelekom flash component

<.flash kind={:natural}>Natural</.flash>

<.flash kind={:primary}>Primary</.flash>

<.flash kind={:secondary}>Secondary</.flash>

<.flash kind={:success}>Success</.flash>

<.flash kind={:warning}>Warning</.flash>

<.flash kind={:danger}>Danger</.flash>

<.flash kind={:info}>Info</.flash>

<.flash kind={:silver}>Silver</.flash>

<.flash kind={:misc}>Misc</.flash>

<.flash kind={:dawn}>Dawn</.flash>

Flash group component in Phoenix Liveview

The Phoenix Flash Group component in the Mishka Chelekom library allows you to manage multiple flash messages using a map of flash messages. This component supports flash types like info and error, but in the code, the kind is transformed into a danger variant for better clarity. Integrated with Phoenix LiveView, it provides real-time feedback by dynamically showing and hiding alerts based on user interaction, ensuring a responsive and seamless user experience.

Success!

The info for flash group

Error!

The error for flash group

<.flash_group kind={:natural}>Natural</.flash>

<.flash_group kind={:primary}>Primary</.flash>

<.flash_group kind={:secondary}>Secondary</.flash>

<.flash_group kind={:success}>Success</.flash>

<.flash_group kind={:warning}>Warning</.flash>

<.flash_group kind={:danger}>Danger</.flash>

<.flash_group kind={:info}>Info</.flash>

<.flash_group kind={:silver}>Silver</.flash>

<.flash_group kind={:misc}>Misc</.flash>

<.flash_group kind={:dawn}>Dawn</.flash>

Positions prop of Alert component in Phoenix Liveview

The position attribute in the Mishka Chelekom alert component allows you to control where the alert appears on the screen. You can choose to display the alert in different corners of the viewport, such as top_left, top_right, bottom_left, and bottom_right. If no value is provided, the alert will be rendered in the DOM without a fixed position, allowing for more flexible placement within your layout. This ensures the alert adapts smoothly to various design requirements.

Default position(nil)

<.alert position="top_left" kind={:natural}>Posistion</.alert>

<.alert position="top_right" kind={:primary}>Posistion</.alert>

<.alert position="bottom_left" kind={:secondary}>Posistion</.alert>

<.alert position="bottom_right" kind={:silver}>Posistion</.alert>

<!--The default position is nil, so you don’t need to pass it-->
<.alert position={nil} kind={:success}>Success</.alert>

Width prop of Alert component in Phoenix Liveview

The width attribute in the Mishka Chelekom alert component allows you to control the width of the alert, ensuring it fits seamlessly within your design. You can choose from a range of predefined sizes, such as extra_small, small, medium, large, and extra_large. This flexibility enables you to tailor the alert's dimensions to suit different layouts and content needs, providing a responsive and visually consistent experience.

Default position(nil)

Extra small

small

Medium

Large

Extra large

<!--Default is w-full, you don’t need to pass it-->
<.alert kind={:warning}>Default position(nil)</.alert>

<.alert kind={:warning} width="extra_small">Extra small</.alert>

<.alert kind={:warning} width="small">small</.alert>

<.alert kind={:warning} width="medium">Medium</.alert>

<.alert kind={:warning} width="large">Large</.alert>

<.alert kind={:warning} width="extra_large">Extra large</.alert>

Border prop

The border attribute in the Mishka Chelekom alert component allows you to control the border width of the alert. You can choose from a range of predefined sizes, such as extra_small, small, medium, large, and extra_large. By default only outline variant has a extra_small border.

Extra small

small

Medium

Large

Extra large

<.alert kind={:danger} border="extra_small">Extra small</.alert>

<.alert kind={:info} border="small">small</.alert>

<.alert kind={:warning} border="medium">Medium</.alert>

<.alert kind={:misc} border="large">Large</.alert>

<.alert kind={:dawn} border="extra_large">Extra large</.alert>

Rounded prop of Alert component in Phoenix Liveview

The rounded attribute in the Mishka Chelekom alert component allows you to control the radius of the alerts. You can choose from a range of predefined sizes, such as extra_small, small, medium, large, and extra_large.

Extra small

small

Medium

Large

Extra large

<.alert kind={:warning} rounded="extra_small">Extra small</.alert>

<.alert kind={:warning} rounded="small">small</.alert>

<.alert kind={:warning} rounded="medium">Medium</.alert>

<.alert kind={:warning} rounded="large">Large</.alert>

<.alert kind={:warning} rounded="extra_large">Extra large</.alert>

Icon prop of Alert component in Phoenix Liveview

The icon prop in the Mishka Chelekom alert component places an icon beside the title when the title prop is used. By default, the icon is set to hero-chat-bubble-bottom-center-text, but you can easily customize it with any Hero icon of your choice to match your design preferences.

This is alert prop of alert component

<.alert kind={:warning} title="This is title" icon="hero-home" />

<.flash kind={:error} title="This is flash title" />

Font weight of Alert component in Phoenix Liveview

The font_weight prop in the Mishka Chelekom alert component allows you to control the text weight by applying Tailwind CSS classes. This makes it easy to adjust the appearance of your alert's text, from silver to bold, ensuring that the typography fits seamlessly into your design.

Font Weight props of Alert

<.alert kind={:warning} font_weight="font-bold">Extra small</.alert>

<.alert kind={:danger} font_weight="font-thin">small</.alert>

<.alert kind={:silver} font_weight="font-Silver">Medium</.alert>

<.flash kind={:misc} font_weight="font-semibold">Large</.flash>

<.flash kind={:dawn} font_weight="font-normal">Extra large</.flash>

Alert component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
title	string	No	Specifies the title of the element.
kind	atom	No	Used for styling and flash lookup. Supported kinds: info, danger, success, natural, primary, secondary, misc, warning, dark, Silver, dawn, error. The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
variant	string	No	Determines the style. Supported variants: default, outline, shadow, bordered, gradient.
position	string	No	Determines the element position. Supported positions: top_left, top_right, bottom_left, bottom_right, nil.
width	string	No	Determines the element width. Supported widths: extra_small, small, medium, large, extra_large, full.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Supported sizes: extra_small, small, medium, large, extra_large.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, full, none.
font_weight	string	No	Determines custom class for the font weight.
icon	any	No	Icon displayed alongside an item.
class	string	No	Custom CSS class for additional styling.

Flash component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
flash	map	No	The map of flash messages to display.
title	string	No	Specifies the title of the element.
kind	atom	No	Used for styling and flash lookup. Supported kinds: info, danger, success, natural, primary, secondary, misc, warning, dark, Silver, dawn, error.
variant	string	No	Determines the style. Supported variants: default, outline, shadow.
position	string	No	Determines the element position. Supported positions: top_left, top_right, bottom_left, bottom_right, nil.
width	string	No	Determines the element width. Supported widths: extra_small, small, medium, large, extra_large, full.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Supported sizes: extra_small, small, medium, large, extra_large.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, full, none.
font_weight	string	No	Determines custom class for the font weight.
icon	any	No	Icon displayed alongside an item.
class	string	No	Custom CSS class for additional styling.

Flash Group component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction. Default is flash-group.
flash	map	Yes	The map of flash messages to display.

Alert CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - shadow - bordered - gradient	Yes
`--color`	string	white - dark - info - danger - success - natural - primary - secondary - misc - warning - silver - dawn - error	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full - none	Yes
`--type`	string	flash - flash_group - alert	Yes
`--only`	string	flash - flash_group - alert	Yes
`--module`	string	Something	NO