Toast
v0.0.10
mix mishka.ui.gen.component toast
Overview of the Phoenix and LiveView Toast Component
The Mishka Chelekom toast component is a Phoenix LiveView component that enables developers to create dynamic and customizable toast notifications, perfect for displaying brief, non-intrusive messages to users. It offers flexibility in positioning, color, size, and dismiss behavior, making it easy to integrate into any application.
Overview of the Phoenix and LiveView Toast Component
This Phoenix LiveView component also supports various styles, making it ideal for providing feedback, alerts, or information to users without interrupting their workflow. With its responsive design and ease of use, this toast component enhances the overall user experience and engagement.
Base Variant
Base Variant
<.toast id="toast-1">Toast base color and variant</.toast>Default Variant
The default style of the Mishka Chelekom toast applies customizable colors, making it ideal for providing contextual information to users. With just a single setting, you can select from a range of color options, ensuring easy integration with your application's design.
Default Variant
<.toast id="toast-2" variant="default" color="natural">Toast Default White</.toast>
<.toast id="toast-3" variant="default" color="white">Toast Default White</.toast>
<.toast id="toast-4" variant="default" color="dark">Toast Default Dark</.toast>
<.toast id="toast-5" variant="default" color="info">Toast Default Info</.toast>
<.toast id="toast-6" variant="default" color="success">Toast Default Success</.toast>
<.toast id="toast-7" variant="default" color="warning">Toast Default Warning</.toast>
<.toast id="toast-8" variant="default" color="danger">Toast Default Danger</.toast>
<.toast id="toast-9" variant="default" color="silver">Toast Default Silver</.toast>
<.toast id="toast-10" variant="default" color="misc">Toast Default Misc</.toast>
<.toast id="toast-11" variant="default" color="dawn">Toast Default Dawn</.toast>
<.toast id="toast-12" variant="default" color="primary">Toast Default Primary</.toast>
<.toast id="toast-13" variant="default" color="secondary">Toast Default Secondary</.toast>Outline Variant
The outline style of the Mishka Chelekom toast features a border. Using a single setting, you can choose from various color variants to suit your design needs.
Outline Variant
<.toast id="toast-14" variant="outline" color="natural">Toast outline Info</.toast>
<.toast id="toast-15" variant="outline" color="info">Toast outline Info</.toast>
<.toast id="toast-16" variant="outline" color="success">Toast outline Success</.toast>
<.toast id="toast-17" variant="outline" color="warning">Toast outline Warning</.toast>
<.toast id="toast-18" variant="outline" color="danger">Toast outline Danger</.toast>
<.toast id="toast-19" variant="outline" color="silver">Toast outline Silver</.toast>
<.toast id="toast-20" variant="outline" color="misc">Toast outline Misc</.toast>
<.toast id="toast-21" variant="outline" color="dawn">Toast outline Dawn</.toast>
<.toast id="toast-22" variant="outline" color="primary">Toast outline Primary</.toast>
<.toast id="toast-23" variant="outline" color="secondary">Toast outline Secondary</.toast>Shadow Variant
The shadow variant of the Mishka Chelekom toast is similar to the default variant, but it also includes a subtle shadow along with a border and white background in silver mode.
Shadow Variant
<.toast id="toast-24" variant="shadow" color="natural">Toast shadow White</.toast>
<.toast id="toast-25" variant="shadow" color="info">Toast shadow Info</.toast>
<.toast id="toast-26" variant="shadow" color="success">Toast shadow Success</.toast>
<.toast id="toast-27" variant="shadow" color="warning">Toast shadow Warning</.toast>
<.toast id="toast-28" variant="shadow" color="danger">Toast shadow Danger</.toast>
<.toast id="toast-29" variant="shadow" color="silver">Toast shadow Silver</.toast>
<.toast id="toast-30" variant="shadow" color="misc">Toast shadow Misc</.toast>
<.toast id="toast-31" variant="shadow" color="dawn">Toast shadow Dawn</.toast>
<.toast id="toast-32" variant="shadow" color="primary">Toast shadow Primary</.toast>
<.toast id="toast-33" variant="shadow" color="secondary">Toast shadow Secondary</.toast>bordered Variant
The Bordered variant of the Mishka Chelekom toast 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
<.toast id="toast-34" variant="bordered" color="natural">Toast bordered White</.toast>
<.toast id="toast-35" variant="bordered" color="white">Toast bordered White</.toast>
<.toast id="toast-36" variant="bordered" color="dark">Toast bordered Dark</.toast>
<.toast id="toast-37" variant="bordered" color="info">Toast bordered Info</.toast>
<.toast id="toast-38" variant="bordered" color="success">Toast bordered Success</.toast>
<.toast id="toast-39" variant="bordered" color="warning">Toast bordered Warning</.toast>
<.toast id="toast-40" variant="bordered" color="danger">Toast bordered Danger</.toast>
<.toast id="toast-41" variant="bordered" color="silver">Toast bordered Silver</.toast>
<.toast id="toast-42" variant="bordered" color="misc">Toast bordered Misc</.toast>
<.toast id="toast-43" variant="bordered" color="dawn">Toast bordered Dawn</.toast>
<.toast id="toast-44" variant="bordered" color="primary">Toast bordered Primary</.toast>
<.toast id="toast-45" variant="bordered" color="secondary">Toast bordered Secondary</.toast>Gradient Variant
The gradient variant of the Mishka Chelekom toast has gradients in various colors.
Gradient Variant
<.toast id="toast-46" variant="gradient" color="natural">Toast gradient White</.toast>
<.toast id="toast-48" variant="gradient" color="info">Toast gradient Info</.toast>
<.toast id="toast-49" variant="gradient" color="success">Toast gradient Success</.toast>
<.toast id="toast-50" variant="gradient" color="warning">Toast gradient Warning</.toast>
<.toast id="toast-51" variant="gradient" color="danger">Toast gradient Danger</.toast>
<.toast id="toast-52" variant="gradient" color="silver">Toast gradient Silver</.toast>
<.toast id="toast-53" variant="gradient" color="misc">Toast gradient Misc</.toast>
<.toast id="toast-54" variant="gradient" color="dawn">Toast gradient Dawn</.toast>
<.toast id="toast-55" variant="gradient" color="primary">Toast gradient Primary</.toast>
<.toast id="toast-56" variant="gradient" color="secondary">Toast gradient Secondary</.toast>Border prop in Phoenix LiveView toast component
The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the toast, allowing you to adjust the thickness to suit your design. To add a border on one side of the toast, use content_border for its thickness and border_position (start or end) for its side.
Border prop in Phoenix LiveView toast component
<.toast id="toast-57" border="extra_small">Border extra small of Toast</.toast>
<.toast id="toast-58" border="small">Border small of Toast</.toast>
<.toast id="toast-59" border="medium">Border medium of Toast</.toast>
<.toast id="toast-60" border="large">Border large of Toast</.toast>
<.toast id="toast-61" border="extra_large">Border extra large of Toast</.toast>Rounded prop
The rounded prop in the Phoenix LiveView toast component allows you to customize the border radius of the toast. By default, the rounded prop is set to medium, meaning the toast will have a moderate border radius. You can modify this to one of the following values: extra_small, small, medium, large, or extra_large. If you want to remove the border radius, you can use none. This flexibility allows you to control the look and feel of the toast to fit your application's design.
Rounded prop
<.toast id="toast-62" rounded="extra_small">Rounded extra small</.toast>
<.toast id="toast-63" rounded="small">Rounded small</.toast>
<.toast id="toast-64" rounded="medium">Rounded medium</.toast>
<.toast id="toast-65" rounded="large">Rounded large</.toast>
<.toast id="toast-66" rounded="extra_large">Rounded extra large</.toast>Space prop
The space prop in the Phoenix LiveView toast component provides various spacing options, including extra_small, small, medium, large, and extra_large. These options define the vertical spacing between items in the toast, with increasing amounts of space from extra_small to extra_large. If no specific value is provided, the default is set to extra_small, but custom values can also be applied as needed.
Space prop
<.toast id="toast-67" space="extra_small">Space extra small</.toast>
<.toast id="toast-68" space="small">Space small</.toast>
<.toast id="toast-69" space="medium">Space medium</.toast>
<.toast id="toast-70" space="large">Space large</.toast>
<.toast id="toast-71" space="extra_large">Space extra large</.toast>
<.toast id="toast-72" space="none">Space none</.toast>Padding prop in Phoenix LiveView toast component
The padding in the Phoenix LiveView toast component provides various padding size options, including extra_small, small, medium, large, and extra_large. These options define the amount of space between the content inside the toast and its edges, with increasing amounts of padding from extra_small to extra_large. If no specific value is provided, the default padding is set to extra_small, ensuring a balanced and consistent look for the component.
Padding prop in Phoenix LiveView toast component
<.toast id="toast-73" padding="extra_small">Padding extra small</.toast>
<.toast id="toast-74" padding="small">Padding small</.toast>
<.toast id="toast-75" padding="medium">Padding medium</.toast>
<.toast id="toast-76" padding="large">Padding large</.toast>
<.toast id="toast-77" padding="extra_large">Padding extra large</.toast>
<.toast id="toast-78" padding="none">Padding none</.toast>Width prop
The width prop in the Phoenix LiveView toast component allows developers to control the element's width, offering flexibility to fit various design requirements. It supports predefined values such as extra_small, small, medium, large, extra_large, and full. Each of these options defines a different maximum width, with full allowing the toast to span the entire width of its container. If no specific value is provided, the default width is set to medium, ensuring a balanced and consistent look. Additionally, custom width values can be applied by passing a string that defines the width class directly.
Width prop
<.toast id="toast-79" width="extra_small">Width extra small</.toast>
<.toast id="toast-80" width="small">Width small</.toast>
<.toast id="toast-81" width="medium">Width medium</.toast>
<.toast id="toast-82" width="large">Width large</.toast>
<.toast id="toast-83" width="extra_large">Width extra large</.toast>
<.toast id="toast-84" width="full">Width full</.toast>Vertical prop
The vertical prop determines the vertical positioning of the toast component. It accepts two values: top and bottom. By default, the toast is positioned at the top of the screen. You can change this to bottom to display the toast at the bottom, offering flexibility in where the notifications appear within the application.
Vertical prop
<.toast id="toast-85" vertical="top">Toast at Top</.toast>
<.toast id="toast-86" vertical="bottom">Toast at Bottom</.toast>Vertical space prop
The vertical_space attribute in the Phoenix LiveView toast component controls the amount of space between vertically stacked toast notifications. It offers flexibility with various predefined options like extra_small, small, medium, large, and extra_large, allowing developers to manage the spacing between toasts to create a visually pleasing and organized layout. By default, the space between items is set to extra_small, but you can adjust it according to your design preferences to ensure the toast notifications don't overlap or appear cluttered when multiple toasts are displayed. This helps improve readability and user experience by maintaining a clear, well-spaced arrangement.
Vertical space prop
<.toast id="toast-87" vertical="top" vertical_space="extra_small"></.toast>
<.toast id="toast-88" vertical="top" vertical_space="small"></.toast>
<.toast id="toast-89" vertical="top" vertical_space="medium"></.toast>
<.toast id="toast-90" vertical="top" vertical_space="large"></.toast>
<.toast id="toast-91" vertical="top" vertical_space="extra_large"></.toast>
<.toast id="toast-92" vertical="bottom" vertical_space="extra_small"></.toast>
<.toast id="toast-93" vertical="bottom" vertical_space="small"></.toast>
<.toast id="toast-94" vertical="bottom" vertical_space="medium"></.toast>
<.toast id="toast-95" vertical="bottom" vertical_space="large"></.toast>
<.toast id="toast-96" vertical="bottom" vertical_space="extra_large"></.toast>Horizontal prop
The horizontal attribute in the Phoenix LiveView toast component controls the horizontal alignment of the toast on the screen. By providing options like left, right, and center, developers can customize where the toast appears horizontally. The default setting is right, positioning the toast on the right side of the screen. However, this can be changed to left for left-side positioning or center for centering the toast in the middle of the screen. This flexibility allows for better control over the toast's appearance and alignment, making it suitable for various design and layout needs.
Horizontal prop
<.toast id="toast-97" horizontal="left" vertical="top"></.toast>
<.toast id="toast-98" horizontal="center" vertical="top"></.toast>
<.toast id="toast-99" horizontal="right" vertical="top"></.toast>
<.toast id="toast-100" horizontal="left" vertical="bottom"></.toast>
<.toast id="toast-101" horizontal="center" vertical="bottom"></.toast>
<.toast id="toast-102" horizontal="right" vertical="bottom"></.toast>Horizontal space prop
The horizontal_space attribute in the Phoenix LiveView toast component defines the spacing between items in the horizontal direction. This prop offers several predefined values such as extra_small, small, medium, large, and extra_large. These values determine the size of the space between items, with increasing amounts of space from extra_small to extra_large. The default value is set to extra_small, but you can customize it as needed to control how close or far apart elements are displayed horizontally. The corresponding utility classes are applied to adjust the spacing for both left and right-aligned items, ensuring a flexible and customizable layout.
Horizontal space prop
<.toast id="toast-103" horizontal_space="extra_small" horizontal="left"></.toast>
<.toast id="toast-104" horizontal_space="small"></.toast>
<.toast id="toast-105" horizontal_space="medium" horizontal="center"></.toast>
<.toast id="toast-106" horizontal_space="large"></.toast>
<.toast id="toast-107" horizontal_space="extra_large" horizontal="left"></.toast>Content border prop
The content_border attribute in the Phoenix LiveView component determines the size and style of the content border within the toast. It offers options like extra_small, small, medium, large, extra_large, and none. These options adjust the width of the border, allowing customization from extra_small to extra_large. Setting the attribute to none hides the border entirely. If no value is provided, it defaults to none, but custom values can also be used as needed. Additionally, if the @content_border is not set to none, the styles defined by border_position will not apply.
Content border prop
<.toast id="toast-108" content_border="extra_small"></.toast>
<.toast id="toast-109" content_border="small"></.toast>
<.toast id="toast-110" content_border="medium"></.toast>
<.toast id="toast-111" content_border="large"></.toast>
<.toast id="toast-112" content_border="extra_large"></.toast>
<.toast id="toast-113" content_border="none"></.toast>Border position prop
The border_position attribute in the Phoenix LiveView toast component allows you to specify where the border should be applied within the element. By default, it is set to start, which means the border will be positioned on the start side of the element (typically the left side in left-to-right layouts). There are options like start and end, each determining whether the border is applied at the beginning or the end of the element. These values give developers control over the border’s placement, allowing for more flexible design adjustments. You can also pass a custom binary value to apply the border in unique ways, and if no value is provided, it defaults to start.
Border position prop
<!--To position the content border, you should add a content border that fits your design.-->
<.toast id="toast-114" content_border="medium" border_position="start"></.toast>
<.toast id="toast-115" content_border="small" border_position="end"></.toast>Row reverse prop
The row_direction prop in the Phoenix LiveView toast component allows you to control the order in which the content and dismiss button are displayed. By default, the content appears first, followed by the dismiss button, with the row_direction set to none, applying a standard left-to-right layout. However, when the row_direction is set to reverse, the positions are swapped, with the dismiss button appearing first and the content following it. This flexibility allows you to easily adjust the layout of your toast notifications, accommodating different design preferences or directional needs. The row_direction prop uses values like none for the standard flow and reverse for reversed alignment, providing customizable control over the visual structure of your toast notifications.
Row reverse prop
<.toast id="toast-116" row_direction="none"></.toast>
<.toast id="toast-117" row_direction="reverse"></.toast>Fixed prop
The fixed prop controls whether the toast element remains fixed on the screen. When it is set to true, the toast stays in a fixed position, typically used for displaying notifications that remain visible as the user scrolls through the page. If set to false, the toast will behave according to its natural flow in the document, allowing it to scroll with the page. By default, this attribute is set to true. This property is especially useful when dealing with a toast group, as it allows multiple toasts to stay fixed together in one area of the screen, enhancing the user experience for displaying multiple notifications in a consistent manner.
<!--You can omit specifying the fixed prop because it is true by default-->
<.toast id="toast-118" fixed></.toast>
<.toast id="toast-119" fixed={true}></.toast>
<.toast id="toast-120" fixed={false}></.toast>Font weight prop
The font_weight prop in the Phoenix LiveView toast component allows you to customize the font weight of the text within the toast using Tailwind CSS classes. By default, it is set to font-normal, giving the text a regular weight. However, you can easily modify this by passing a different Tailwind class for font weight, such as font-bold to make the text bold, or other classes like font-thin or font-medium to adjust the thickness of the text as per your design needs. This flexibility allows for easy control over the typography within the toast, ensuring it aligns with the desired visual hierarchy.
Font weight prop
<.toast id="toast-121" font_weight="font-medium"></.toast>
<.toast id="toast-122" font_weight="font-thin"></.toast>
<.toast id="toast-123" font_weight="font-black"></.toast>Toast group component
The toast_group component in Phoenix LiveView is designed to manage and display multiple toast notifications in a cohesive and organized manner. This component allows developers to group several toast messages in one area of the screen, providing a unified space for notifications. Each toast within the group can be customized with individual properties such as space, vertical_space, horizontal_space, and more. By default, the toasts are stacked, and the entire group can be fixed in position ensuring that the notifications remain visible even when the user scrolls through the page. The toast_group component is ideal for scenarios where multiple messages need to be displayed without overwhelming the user interface. It maintains a clean and structured appearance, making it easier to manage notifications in a more organized, visually appealing way.
Toast group component
<.toast_group>
<.toast id="toast-124" fixed={false}></.toast>
<.toast id="toast-125" fixed={false}></.toast>
<.toast id="toast-126" fixed={false}></.toast>
</.toast_group>Space prop in Phoenix LiveView toast group component
The space prop in the Phoenix LiveView toast group component provides various spacing options, including extra_small, small, medium, large, and extra_large. These options define the vertical spacing between individual toasts within the group, with increasing amounts of space from extra_small to extra_large. If no specific value is provided, the default is set to extra_small, but custom values can also be applied as needed.
Space prop in Phoenix LiveView toast group component
<.toast_group space="extra_small"><.toast id="toast-127" fixed={false}></.toast></.toast_group>
<.toast_group space="small"><.toast id="toast-128" fixed={false}></.toast></.toast_group>
<.toast_group space="medium"><.toast id="toast-129" fixed={false}></.toast></.toast_group>
<.toast_group space="large"><.toast id="toast-130" fixed={false}></.toast></.toast_group>
<.toast_group space="extra_large"><.toast id="toast-131" fixed={false}></.toast></.toast_group>Vertical prop
The vertical prop determines the vertical positioning of the toast group component. It accepts two values: top and bottom. By default, the toast group is positioned at the bottom of the screen. You can change this to top to display the group at the top, offering flexibility in where the notifications appear within the application.
Vertical prop
<.toast_group vertical="top"><.toast id="toast-132" fixed={false}></.toast></.toast_group>
<.toast_group vertical="bottom"><.toast id="toast-133" fixed={false}></.toast></.toast_group>Vertical space prop
The vertical_space attribute in the Phoenix LiveView toast group component controls the space between vertically stacked toast notifications within the group. It offers flexibility with predefined options like extra_small, small, medium, large, and extra_large. By default, the space is set to extra_small, but you can adjust it to maintain a clean and organized layout when displaying multiple toasts, ensuring they don’t overlap or look cluttered.
Vertical space prop
<.toast_group vertical_space="extra_large"><.toast id="toast-134" fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="large"><.toast id="toast-135" fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="medium"><.toast id="toast-136" fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="small"><.toast id="toast-137" fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="extra_small"><.toast id="toast-138" fixed={false}></.toast></.toast_group>Horizontal prop
The horizontal attribute in the Phoenix LiveView toast group component controls the horizontal alignment of the group on the screen. Options include left, right, and center. By default, the toast group appears on the right, but you can adjust it to left or center to change its alignment based on your design needs.
Horizontal prop
<.toast_group horizontal="left"><.toast id="toast-139" fixed={false}></.toast></.toast_group>
<.toast_group horizontal="center"><.toast id="toast-140" fixed={false}></.toast></.toast_group>
<.toast_group horizontal="right"><.toast id="toast-141" fixed={false}></.toast></.toast_group>Horizontal space prop
The horizontal_space attribute in the Phoenix LiveView toast group component defines the spacing between items in the horizontal direction within the toast group. It offers several predefined values such as extra_small, small, medium, large, and extra_large. The default value is extra_small, but you can adjust it to control the spacing between horizontally aligned toasts in the group. This prop ensures flexibility and layout customization for different designs.
Horizontal space prop
<.toast_group horizontal_space="extra_small"><.toast id="toast-142" fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="small"><.toast id="toast-143" fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="medium"><.toast id="toast-144" fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="large"><.toast id="toast-145" fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="extra_large"><.toast id="toast-146" fixed={false}></.toast></.toast_group>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | A unique identifier is used to manage state and interaction |
fixed
|
boolean
|
true
| — | No | Determines whether the element is fixed |
variant
|
string
|
base
|
defaultoutlineshadowborderedgradientbase
| No | Determines the style |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
extra_small
| — | No | Determines border style |
rounded
|
string
|
medium
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines the border radius |
width
|
string
|
medium
| — | No | Determines the element width |
space
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_largenone
| No | Space between items |
vertical
|
string
|
top
|
topbottom
| No | Type of vertical |
vertical_space
|
string
|
extra_small
| — | No | Space between vertical items |
z_index
|
string
|
z-50
| — | No | custom z-index |
horizontal
|
string
|
right
|
leftrightcenter
| No | Type of horizontal |
horizontal_space
|
string
|
extra_small
| — | No | Space between horizontal items |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
class
|
any
| — | — | No | Additional CSS classes to be added to the toast. |
wrapper_class
|
string
| — | — | No | Additional CSS classes to be added to the toast contents. |
content_wrapper_class
|
string
| — | — | No | Additional CSS classes to be added to the toast contents. |
content_class
|
string
| — | — | No | Additional CSS classes to be added to the toast contents. |
dismiss_class
|
string
| — | — | No | Additional CSS classes to be added to the toast contents. |
dismiss_icon_class
|
string
| — | — | No | Additional CSS classes to be added to the toast contents. |
params
|
map
|
%{":kind" => "toast"}
| — | No | A map of additional parameters used for element configuration |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
content_border
|
string
|
none
| — | No | Determines the content border style |
border_position
|
string
|
start
| — | No | Determines the border position style |
row_direction
|
string
|
none
| — | No | Determines row direction |
padding
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines padding for items |
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
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--padding
|
extra_smallsmallmediumlargeextra_largenone
|
--space
|
extra_smallsmallmediumlargeextra_largenone
|
--rounded
|
extra_smallsmallmediumlargeextra_largenone
|
--type
|
toasttoast_group
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component toast