Toast Close Button in Tailwind

[Nick]

When using the Toast in Tailwind theme, the close button is not showing the correct style. I have attached an example to show it and the same issue is prevalent in the Demos too.

In the Demos,

Attachment: ToastTest_dbbd7a6a.zip

[Vinothkumar Yuvaraj]

Hi Nick,

To solve your problem, you can use the following styles. Please see the attached sample for your reference.

<style>

.e-toast .e-toast-close-icon::before{

        content:"\e7e7";

 }

</style>

We will correct our demo sample site and refresh it in any one of our upcoming releases.

Regards,

Vinothkumar

Attachment: ToastTest_6da5b781_12c42393.zip

[Nick]

Now this removes the Toast close button icon from material, fabric and bootstrap themes and changes the close button icon to a hamburger menu in the bootstrap4 theme.

I tried using .tailwind and .tailwind-dark in front of .e-toast .e-toast-close-icon::before but that does not work either.

[Vinothkumar Yuvaraj]

Hi Nick,

Please ignore the previously provided sample level solution. We have already fixed and included the fix in Volume 4 release v20.4.0.38, so please upgrade your package version. Please find the demo link below for your reference.

Demo Link : https://blazor.syncfusion.com/demos/toast/template?theme=fluent

Please let us know if you have any concerns.

[Abhishek]

The Toast Close Button in Tailwind CSS is a versatile utility for enhancing user experience. It facilitates the dismissal of notification toasts, improving user control. Tailwind provides various classes for styling the Toast Close Button, such as 'text-' for color customization and 'hover:' for interactive feedback adjustments. Additionally, 'focus:' classes enhance accessibility. The 'hidden' utility hides the close button when not needed. By combining these functionalities, developers can seamlessly integrate and customize Toast Close Buttons in Tailwind, ensuring both functionality and aesthetic coherence in web applications.

Fore more info, read here:  https://purecode.ai/blogs/tailwind-button/

[Kokila Poovendran]

Hi Abhishek,

Thank you for reaching out! We have carefully reviewed your query, and we've prepared a sample code snippet for implementing Toast Close Buttons in CSS. Below is the code for your reference:

<div class="col-lg-12 control-section toast-default-section">

    <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" ShowCloseButton=true Content="@ToastContent" Timeout="0" Icon="e-meeting">

        <ToastPosition X="@ToastPosition"></ToastPosition>

    </SfToast>

    <div class="col-lg-12 col-sm-12 col-md-12 center">

        <div id="toastBtnDefault" style="margin: auto;text-align: center">

            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button>

            <button class="e-btn" @onclick="@HideOnClick">Hide All</button>

        </div>

    </div>

</div>

<style>

    #toast_default .e-meeting::before {

        content: "\e705";

        font-size: 17px;

    }

 

    .bootstrap4 #toast_default .e-meeting::before {

        content: "\e763";

        font-size: 20px;

    }

 

    .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon,

    .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:focus {

        background-color: bisque !important;

        color: red !important;

    }

 

   .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:hover       {

       background-color: aquamarine !important;

    }

 

</style>

@code {

    SfToast ToastObj;

    private string ToastPosition = "Right";

    private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";

    private async Task ShowOnClick()

    {

        await this.ToastObj.ShowAsync();

    }

    private async Task HideOnClick()

    {

        await this.ToastObj.HideAsync("All");

    }

}

In this modified code snippet, we have integrated styles for the close button to enhance the visual appeal and user experience. Feel free to test this implementation, and if you have any further questions or need additional assistance, please don't hesitate to reach out.

Regards,

Kokila Poovendran.