Class ToastModel

Represents the configuration model for Toast notifications.

Inheritance

System.Object

ToastModel

Namespace: Syncfusion.Blazor.Notifications

Assembly: Syncfusion.Blazor.dll

Syntax

public class ToastModel : Object

Remarks

This class defines all the properties and settings that control the appearance, behavior, and content of Toast notifications. It provides comprehensive customization options including animation, positioning, timing, and visual styling.

Examples

var toastModel = new ToastModel
{
    Title = "Success",
    Content = "Operation completed successfully",
    Icon = "e-icons e-success",
    CssClass = "custom-toast",
    Timeout = 4000,
    ShowProgressBar = true,
    Position = new ToastPosition { X = "Right", Y = "Top" }
};

Constructors

ToastModel()

Declaration

public ToastModel()

Properties

Animation

Gets or sets the animation configuration settings for showing and hiding the Toast.

Declaration

public ToastAnimationSettings Animation { get; set; }

Property Value

Type	Description
ToastAnimationSettings	A ToastAnimationSettings instance that defines the animation behavior. Can be `null`.

Remarks

This property controls the visual transition effects when the Toast appears and disappears. You can configure separate animations for show and hide operations, including effect types, durations, and easing functions. If not specified, the Toast will use default animation settings.

Content

Gets or sets the content to be displayed in the Toast notification.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string representing the Toast content. Accepts plain text, HTML markup, CSS selectors, or element references. Can be `null`.

Remarks

This property defines the main message or content that will be displayed in the Toast notification. It supports HTML markup for rich content formatting, and can reference DOM elements or CSS selectors. For complex content layouts, consider using the ContentTemplate property instead.

ContentTemplate

Gets or sets the template for rendering custom Toast content.

Declaration

public RenderFragment ContentTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that defines the custom content template. Can be `null`.

Remarks

This property allows you to define complex, interactive content for the Toast notification using Razor syntax. When specified, this template takes precedence over the Content property and provides full control over the Toast's content rendering, including the ability to include other Blazor components, event handlers, and dynamic content.

CssClass

Gets or sets the CSS classes for customizing the Toast appearance.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string containing one or more CSS class names separated by spaces. Can be `null`.

Remarks

This property allows you to apply custom styling to the Toast notification by specifying CSS classes. Multiple classes can be applied by separating them with spaces. These classes can be used to customize colors, fonts, borders, shadows, and other visual aspects of the Toast.

EnablePersistence

Gets or sets a value indicating whether the component's state should persist between page reloads.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the component state should be persisted; otherwise, `false`. The default value is `false`.

Remarks

When enabled, the Toast component will save its current state (such as active Toast messages) to browser storage and restore it when the page is reloaded. This ensures continuity of Toast notifications across page refreshes.

EnableRtl

Gets or sets a value indicating whether the Toast should be rendered in right-to-left direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the Toast should be rendered in RTL mode; otherwise, `false`. The default value is `false`.

Remarks

This property enables right-to-left text direction and layout for the Toast component, which is essential for proper display of RTL languages like Arabic, Hebrew, or Persian. When enabled, text alignment, icon positioning, and progress bar direction are adjusted accordingly.

ExtendedTimeout

Gets or sets the extended timeout duration for Toast display after user interaction.

Declaration

public int ExtendedTimeout { get; set; }

Property Value

Type	Description
System.Int32	An integer value representing the extended timeout in milliseconds. The default value is 1000ms.

Remarks

This property specifies how long the Toast should remain visible after the user interacts with it (hover, focus, etc.). When a user hovers over or focuses on a Toast, the normal timeout is paused, and this extended timeout is used instead. This ensures users have adequate time to read or interact with the Toast content.

Height

Gets or sets the height of the Toast notification.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	A string representing the height in pixels, percentage, or other CSS units. Can be `null` for auto height.

Remarks

This property controls the vertical size of the Toast notification. You can specify the height using:

Pixels: "200px"
Percentage: "50%"
Other CSS units: "2em", "10vh"

If not specified, the Toast will automatically size based on its content.

Icon

Gets or sets the CSS classes for the Toast icon.

Declaration

public string Icon { get; set; }

Property Value

Type	Description
System.String	A string containing CSS class names for the icon. Can be `null` for no icon.

Remarks

This property specifies the CSS classes used to display an icon in the top-left corner of the Toast. Common icon libraries like Font Awesome, Material Icons, or Syncfusion's built-in icons can be used. Example values: "e-icons e-success", "fas fa-check", "material-icons check_circle".

Key

Gets or sets the unique identifier for the Toast notification.

Declaration

public int Key { get; set; }

Property Value

Type	Description
System.Int32	An integer value representing the unique key of the Toast. Each Toast is assigned a unique key when created.

Remarks

This property provides a unique identifier for each Toast notification, which is essential for tracking, referencing, and managing individual Toast instances when multiple notifications are active. The key is automatically assigned by the Toast system and is used in event arguments to identify specific Toast notifications.

NewestOnTop

Gets or sets a value indicating whether newly created Toast messages should appear on top of existing ones.

Declaration

public bool NewestOnTop { get; set; }

Property Value

Type	Description
System.Boolean	`true` if new Toast messages should appear on top; otherwise, `false`. The default value is `true`.

Remarks

This property controls the stacking order of multiple Toast notifications. When set to true, new Toast messages are displayed above existing ones. When set to false, new messages appear below existing ones. This affects the visual hierarchy and user attention flow when multiple Toast notifications are active.

Position

Gets or sets the position where the Toast message should be displayed within the target container.

Declaration

public ToastPosition Position { get; set; }

Property Value

Type	Description
ToastPosition	A ToastPosition instance specifying the X and Y coordinates. Can be `null` for default positioning.

Remarks

This property determines where the Toast notification appears on the screen or within its target container.

X values: "Left", "Right", "Center"
Y values: "Top", "Bottom"

Note that for multiple Toast displays, new Toast positions will not update dynamically until old Toast messages are removed. Common combinations include Top-Right, Bottom-Left, Top-Center, etc.

ProgressDirection

Gets or sets the direction for the Toast progress bar animation.

Declaration

public ProgressDirection ProgressDirection { get; set; }

Property Value

Type	Description
ProgressDirection	A ProgressDirection enumeration value that determines the progress bar direction.

Remarks

This property controls the direction in which the progress bar animates to indicate the remaining display time. The progress bar provides visual feedback about how much time is left before the Toast automatically closes. Different directions can be used to match the Toast's visual design and user interface preferences.

ShowCloseButton

Gets or sets a value indicating whether to display a close button in the Toast.

Declaration

public bool ShowCloseButton { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the close button should be shown; otherwise, `false`. The default value is `false`.

Remarks

This property controls the visibility of a close button that allows users to manually dismiss the Toast notification. When enabled, users can click the close button to immediately remove the Toast without waiting for the timeout. This is particularly useful for important notifications that users might want to dismiss at their convenience.

ShowProgressBar

Gets or sets a value indicating whether to display a progress bar showing the remaining timeout.

Declaration

public bool ShowProgressBar { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the progress bar should be shown; otherwise, `false`. The default value is `false`.

Remarks

This property controls the visibility of a progress bar that indicates how much time remains before the Toast automatically closes. The progress bar provides visual feedback to users about the Toast's remaining display duration. The animation direction of the progress bar is controlled by the ProgressDirection property.

Target

Gets or sets the target container element where the Toast should be displayed.

Declaration

public string Target { get; set; }

Property Value

Type	Description
System.String	A string representing a CSS selector or element ID for the target container. The default value is `null`, which refers to the document body.

Remarks

This property specifies the container element within which the Toast notification will be positioned. The positioning properties like Position are applied relative to this target container.

If null or empty, the Toast will be appended to the document body
Can be a CSS selector like "#myContainer" or ".toast-area"
Can be an element ID or class name

Timeout

Gets or sets the display timeout duration for the Toast in milliseconds.

Declaration

public int Timeout { get; set; }

Property Value

Type	Description
System.Int32	An integer value representing the timeout in milliseconds. The default value is 5000ms (5 seconds).

Remarks

This property controls how long the Toast notification remains visible before automatically closing.

Values greater than 0: Toast will auto-close after the specified duration
Value of 0: Toast will remain visible until manually closed by the user

The timeout can be extended when users interact with the Toast, as controlled by the ExtendedTimeout property.

Title

Gets or sets the title text to be displayed in the Toast header.

Declaration

public string Title { get; set; }

Property Value

Type	Description
System.String	A string representing the Toast title. Works only with plain text values. Can be `null` for no title.

Remarks

This property specifies the title or header text that appears at the top of the Toast notification. The title is typically used to provide a brief summary or category of the notification (e.g., "Success", "Error", "Warning"). Only plain string values are supported for the title; HTML markup is not processed in this property.

Width

Gets or sets the width of the Toast notification.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A string representing the width in pixels, percentage, or other CSS units. The default value is "300px".

Remarks

This property controls the horizontal size of the Toast notification. You can specify the width using:

Pixels: "300px" (default)
Percentage: "50%"
Other CSS units: "20em", "30vw"

On mobile devices, the default width is typically considered as 100% to ensure proper responsive behavior.