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="natural">Toast Default White</.toast> <.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="silver">Toast Default Silver</.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="natural">Toast outline Info</.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="silver">Toast outline Silver</.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 silver mode.
<.toast variant="shadow" color="natural">Toast shadow White</.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="silver">Toast shadow Silver</.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>
bordered Variant
The Bordered variant of the Mishka Chelekom card 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.
<.toast variant="bordered" color="natural">Toast bordered White</.toast> <.toast variant="bordered" color="white">Toast bordered White</.toast> <.toast variant="bordered" color="dark">Toast bordered Dark</.toast> <.toast variant="bordered" color="info">Toast bordered Info</.toast> <.toast variant="bordered" color="success">Toast bordered Success</.toast> <.toast variant="bordered" color="warning">Toast bordered Warning</.toast> <.toast variant="bordered" color="danger">Toast bordered Danger</.toast> <.toast variant="bordered" color="silver">Toast bordered Silver</.toast> <.toast variant="bordered" color="misc">Toast bordered Misc</.toast> <.toast variant="bordered" color="dawn">Toast bordered Dawn</.toast> <.toast variant="bordered" color="primary">Toast bordered Primary</.toast> <.toast variant="bordered" color="secondary">Toast bordered Secondary</.toast>
Gradient Variant
The gradient variant of the Mishka Chelekom card has gradients in various colors.
<.toast variant="gradient" color="natural">Toast gradient White</.toast> <.toast variant="gradient" color="dark">Toast gradient Dark</.toast> <.toast variant="gradient" color="info">Toast gradient Info</.toast> <.toast variant="gradient" color="success">Toast gradient Success</.toast> <.toast variant="gradient" color="warning">Toast gradient Warning</.toast> <.toast variant="gradient" color="danger">Toast gradient Danger</.toast> <.toast variant="gradient" color="silver">Toast gradient Silver</.toast> <.toast variant="gradient" color="misc">Toast gradient Misc</.toast> <.toast variant="gradient" color="dawn">Toast gradient Dawn</.toast> <.toast variant="gradient" color="primary">Toast gradient Primary</.toast> <.toast 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. 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.
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-silver
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-silver"></.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>