Alert
v0.0.10
mix mishka.ui.gen.component alert
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.
Overview of the Phoenix and LiveView Alert Component
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.
Base Variant
Base Variant
<.alert variant="base">Base</.alert>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.
Default Variant
<.alert variant="default" kind={:natural}>Natural</.alert>
<.alert variant="default" kind={:white}>White</.alert>
<.alert variant="default" kind={:dark}>Dark</.alert>
<.alert variant="default" kind={:primary}>Primary</.alert>
<.alert variant="default" kind={:secondary}>Secondary</.alert>
<.alert variant="default" kind={:success}>Success</.alert>
<.alert variant="default" kind={:warning}>Warning</.alert>
<.alert variant="default" kind={:danger}>Danger</.alert>
<.alert variant="default" kind={:info}>Info</.alert>
<.alert variant="default" kind={:silver}>Silver</.alert>
<.alert variant="default" kind={:misc}>Misc</.alert>
<.alert variant="default" 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.
Outline Variant
<.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 light mode.
Shadow Variant
<.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.
Bordered Variant
<.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 alert has gradients in various colors.
Gradient Variant
<.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>Alert title class
Customize alert's title appearance by adding custom classes using title_class
<.flash content_class="custom_class"></.flash>
<.flash title_class="custom_class"></.flash>
<.flash button_class="custom_class"></.flash>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.
Flash component in Phoenix Liveview
<.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 elements classes
Customize flash elements' appearance by adding custom classes using content_class title_class button_class
<.flash content_class="custom_class"></.flash>
<.flash title_class="custom_class"></.flash>
<.flash button_class="custom_class"></.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.
<.flash_group position="top_left" flash={@flash} />
<.flash_group position="top_right" flash={@flash} />
<.flash_group position="bottom_left" flash={@flash} />
<.flash_group position="bottom_right" flash={@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.
Positions prop of Alert component in Phoenix Liveview
<.alert position="top_left" kind={:natural}>Position</.alert>
<.alert position="top_right" kind={:primary}>Position</.alert>
<.alert position="bottom_left" kind={:secondary}>Position</.alert>
<.alert position="bottom_right" kind={:silver}>Position</.alert>
<!--By default the alert has no fixed position, so you don’t need to pass it-->
<.alert 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.
Width prop of Alert component in Phoenix Liveview
<!--Default is w-full, you don’t need to pass it-->
<.alert kind={:warning}>Default width</.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.
Border prop
<.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.
Rounded prop of Alert component in Phoenix Liveview
<.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>Padding prop of Alert component in Phoenix Liveview
The padding attribute in the Mishka Chelekom alert component allows you to control the padding of the alerts. You can choose from a range of predefined sizes, such as extra_small, small, medium, large, and extra_large.
Padding prop of Alert component in Phoenix Liveview
<.alert kind={:warning} padding="extra_small">Extra small</.alert>
<.alert kind={:warning} padding="small">small</.alert>
<.alert kind={:warning} padding="medium">Medium</.alert>
<.alert kind={:warning} padding="large">Large</.alert>
<.alert kind={:warning} padding="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.
Icon prop of Alert component in Phoenix Liveview
<.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 light to bold, ensuring that the typography fits seamlessly into your design.
Font weight of Alert component in Phoenix Liveview
<.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-light">Medium</.alert>
<.flash kind={:misc} font_weight="font-semibold">Large</.flash>
<.flash kind={:dawn} font_weight="font-normal">Extra large</.flash>Attributes
| Name | Type | Default | Values | 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
|
:natural
| — | No | used for styling and flash lookup |
variant
|
string
|
default
|
defaultoutlineshadowborderedgradientbase
| No | Determines the style |
position
|
string
| — | — | No | Determines the element position |
width
|
string
|
full
| — | No | Determines the element width |
border
|
string
|
extra_small
| — | No | Determines the element border width |
padding
|
string
|
small
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines the element padding size |
z_index
|
string
|
z-50
| — | No | custom z-index |
size
|
string
|
medium
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
icon
|
any
|
hero-chat-bubble-bottom-center-text
| — | No | Icon displayed alongside of an item |
class
|
any
| — | — | No | Custom CSS class for additional styling |
title_class
|
string
|
flex items-center gap-1.5 leading-6 font-semibold mb-1
| — | No | Custom CSS class for additional styling to title |
icon_class
|
string
| — | — | No | Custom CSS class for additional styling to icon |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | Inner block that renders HEEx content |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultoutlineshadowborderedgradientbase
|
--color
|
whitebasedarkinfodangersuccessnaturalprimarysecondarymiscwarningsilverdawnerror
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--padding
|
extra_smallsmallmediumlargeextra_largenone
|
--type
|
flashflash_groupalert
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component alert