Toast

New version v0.0.1 🚀

Customizable toast notifications in Phoenix LiveView provide seamless, non-intrusive user feedback with flexible options for size, color, and positioning.

Installation:

mix mishka.ui.gen.component toast

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

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.

This Phoenix LiveView component also supports various styles, custom triggers, and timers, 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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.

Note:

id

is required for each 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.

<.toast color="white">Toast Default White</.toast>
<.toast color="dark">Toast Default Dark</.toast>
<.toast color="info">Toast Default Info</.toast>
<.toast color="success">Toast Default Success</.toast>
<.toast color="warning">Toast Default Warning</.toast>
<.toast color="danger">Toast Default Danger</.toast>
<.toast color="light">Toast Default Light</.toast>
<.toast color="misc">Toast Default Misc</.toast>
<.toast color="dawn">Toast Default Dawn</.toast>
<.toast color="primary">Toast Default Primary</.toast>
<.toast 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.

<.toast variant="outline" color="white">Toast outline White</.toast>
<.toast variant="outline" color="dark">Toast outline Dark</.toast>
<.toast variant="outline" color="info">Toast outline Info</.toast>
<.toast variant="outline" color="success">Toast outline Success</.toast>
<.toast variant="outline" color="warning">Toast outline Warning</.toast>
<.toast variant="outline" color="danger">Toast outline Danger</.toast>
<.toast variant="outline" color="light">Toast outline Light</.toast>
<.toast variant="outline" color="misc">Toast outline Misc</.toast>
<.toast variant="outline" color="dawn">Toast outline Dawn</.toast>
<.toast variant="outline" color="primary">Toast outline Primary</.toast>
<.toast 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 light mode.

<.toast variant="shadow" color="white">Toast shadow White</.toast>
<.toast variant="shadow" color="dark">Toast shadow Dark</.toast>
<.toast variant="shadow" color="info">Toast shadow Info</.toast>
<.toast variant="shadow" color="success">Toast shadow Success</.toast>
<.toast variant="shadow" color="warning">Toast shadow Warning</.toast>
<.toast variant="shadow" color="danger">Toast shadow Danger</.toast>
<.toast variant="shadow" color="light">Toast shadow Light</.toast>
<.toast variant="shadow" color="misc">Toast shadow Misc</.toast>
<.toast variant="shadow" color="dawn">Toast shadow Dawn</.toast>
<.toast variant="shadow" color="primary">Toast shadow Primary</.toast>
<.toast variant="shadow" color="secondary">Toast shadow Secondary</.toast>

Unbordered Variant

The unbordered variant of the Mishka Chelekom toast is similar to the default variant, but without the border.

<.toast variant="unbordered" color="white">Toast unbordered White</.toast>
<.toast variant="unbordered" color="dark">Toast unbordered Dark</.toast>
<.toast variant="unbordered" color="info">Toast unbordered Info</.toast>
<.toast variant="unbordered" color="success">Toast unbordered Success</.toast>
<.toast variant="unbordered" color="warning">Toast unbordered Warning</.toast>
<.toast variant="unbordered" color="danger">Toast unbordered Danger</.toast>
<.toast variant="unbordered" color="light">Toast unbordered Light</.toast>
<.toast variant="unbordered" color="misc">Toast unbordered Misc</.toast>
<.toast variant="unbordered" color="dawn">Toast unbordered Dawn</.toast>
<.toast variant="unbordered" color="primary">Toast unbordered Primary</.toast>
<.toast variant="unbordered" color="secondary">Toast unbordered 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. Additionally, you can use boolean props such as left_border, right_border, hide_border, and full_border to change the border position, add, or remove borders as needed for greater customization.

<.toast border="extra_small">Border extra small of Toast</.toast>
<.toast border="small">Border small of Toast</.toast>
<.toast border="medium">Border medium of Toast</.toast>
<.toast border="large">Border large of Toast</.toast>
<.toast 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.

<.toast rounded="extra_small">Rounded extra small</.toast>
<.toast rounded="small">Rounded small</.toast>
<.toast rounded="medium">Rounded medium</.toast>
<.toast rounded="large">Rounded large</.toast>
<.toast 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.

<.toast space="extra_small">Space extra small</.toast>
<.toast space="small">Space small</.toast>
<.toast space="medium">Space medium</.toast>
<.toast space="large">Space large</.toast>
<.toast space="extra_large">Space extra large</.toast>
<.toast 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.

<.toast padding="extra_small">Padding extra small</.toast>
<.toast padding="small">Padding small</.toast>
<.toast padding="medium">Padding medium</.toast>
<.toast padding="large">Padding large</.toast>
<.toast padding="extra_large">Padding extra large</.toast>
<.toast 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.

<.toast width="extra_small">Width extra small</.toast>
<.toast width="small">Width small</.toast>
<.toast width="medium">Width medium</.toast>
<.toast width="large">Width large</.toast>
<.toast width="extra_large">Width extra large</.toast>
<.toast 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.

<.toast vertical="top">Toast at Top</.toast>
<.toast 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.

<.toast vertical="top" vertical_space="extra_small"></.toast>
<.toast vertical="top" vertical_space="small"></.toast>
<.toast vertical="top" vertical_space="medium"></.toast>
<.toast vertical="top" vertical_space="large"></.toast>
<.toast vertical="top" vertical_space="extra_large"></.toast>
<.toast vertical="bottom" vertical_space="extra_small"></.toast>
<.toast vertical="bottom" vertical_space="small"></.toast>
<.toast vertical="bottom" vertical_space="medium"></.toast>
<.toast vertical="bottom" vertical_space="large"></.toast>
<.toast 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.

<.toast horizontal="left" vertical="top"></.toast>
<.toast horizontal="center" vertical="top"></.toast>
<.toast horizontal="right" vertical="top"></.toast>
<.toast horizontal="left" vertical="bottom"></.toast>
<.toast horizontal="center" vertical="bottom"></.toast>
<.toast 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.

<.toast horizontal_space="extra_small" horizontal="left"></.toast>
<.toast horizontal_space="small"></.toast>
<.toast horizontal_space="medium" horizontal="center"></.toast>
<.toast horizontal_space="large"></.toast>
<.toast 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.

<.toast content_border="extra_small"></.toast>
<.toast content_border="small"></.toast>
<.toast content_border="medium"></.toast>
<.toast content_border="large"></.toast>
<.toast content_border="extra_large"></.toast>
<.toast 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.

<!--To position the content border, you should add a content border that fits your design.-->
<.toast content_border="medium" border_position="start"></.toast>
<.toast 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.

All components that have a dismiss button. When performing the operation, it sends an event to the server. for example


  handle_event("dismiss", params, socket)

<.toast row_direction="none"></.toast>
<.toast 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 fixed></.toast>
<.toast fixed={true}></.toast>
<.toast 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-light 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.

<.toast font_weight="font-light"></.toast>
<.toast font_weight="font-thin"></.toast>
<.toast 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>
  <.toast fixed={false}></.toast>
  <.toast fixed={false}></.toast>
  <.toast 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.

<.toast_group space="extra_small"><.toast fixed={false}></.toast></.toast_group>
<.toast_group space="small"><.toast fixed={false}></.toast></.toast_group>
<.toast_group space="medium"><.toast fixed={false}></.toast></.toast_group>
<.toast_group space="large"><.toast fixed={false}></.toast></.toast_group>
<.toast_group space="extra_large"><.toast 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.

<.toast_group vertical="top"><.toast fixed={false}></.toast></.toast_group>
<.toast_group vertical="bottom"><.toast 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.

<.toast_group vertical_space="extra_large"><.toast fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="large"><.toast fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="medium"><.toast fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="small"><.toast fixed={false}></.toast></.toast_group>
<.toast_group vertical_space="extra_small"><.toast 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.

<.toast_group horizontal="left"><.toast fixed={false}></.toast></.toast_group>
<.toast_group horizontal="center"><.toast fixed={false}></.toast></.toast_group>
<.toast_group horizontal="right"><.toast 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.

<.toast_group horizontal_space="extra_small"><.toast fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="small"><.toast fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="medium"><.toast fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="large"><.toast fixed={false}></.toast></.toast_group>
<.toast_group horizontal_space="extra_large"><.toast fixed={false}></.toast></.toast_group>

Toast Component Props

Name	Type	Required	Description
id	string	Yes	A unique identifier used to manage state and interaction.
fixed	boolean	No	Determines whether the toast is fixed. Default is true.
variant	string	No	Determines the style of the toast. Options include default, outline, etc.
color	string	No	Determines the color theme of the toast. Default is white.
border	string	No	Determines the border style. Default is extra_small.
rounded	string	No	Determines the border radius. Default is medium.
width	string	No	Determines the width of the toast. Default is medium.
space	string	No	Defines the space between items. Default is extra_small.
vertical	string	No	Determines the vertical positioning. Options are top or bottom. Default is top.
vertical_space	string	No	Defines the vertical space between items. Default is extra_small.
horizontal	string	No	Determines the horizontal positioning. Options are left, right, or center. Default is right.
horizontal_space	string	No	Defines the horizontal space between items. Default is extra_small.
font_weight	string	No	Determines the font weight. Default is font-normal.
class	string	No	Custom CSS class for additional styling. Default is an empty string.
params	map	No	A map of additional parameters used for element configuration. Default is %{kind: "toast"}.
rest	global	No	Global attributes that can define defaults which are merged with attributes provided by the caller.
content_border	string	No	Determines the content border style. Default is none.
border_position	string	No	Determines the border position style. Default is start.
row_direction	string	No	Determines row direction. Default is none.
padding	string	No	Determines padding for items. Default is extra_small.

Toast Group Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction.
space	string	No	Space between items. Default is small.
vertical	string	No	Determines vertical positioning. Options are top or bottom. Default is bottom.
vertical_space	string	No	Defines the space between vertical items. Default is extra_small.
horizontal	string	No	Determines horizontal positioning. Options are left, right, or center. Default is right.
horizontal_space	string	No	Defines the space between horizontal items. Default is extra_small.
class	string	No	Custom CSS class for additional styling. Default is an empty string.

Toast CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - unbordered	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--space`	string	extra_small - small - medium - large - extra_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - none	Yes
`--type`	string	toast - toast_group	Yes
`--only`	string	toast - toast_group	Yes
`--module`	string	Something	NO