atomui/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.AlertShowCase"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:atom="https://atomui.net"
    xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
    mc:Ignorable="d">
    <desktop:ShowCasePanel>

        <desktop:ShowCaseItem
            Title="Basic"
            Description="The simplest usage for short messages.">
            <StackPanel Orientation="Vertical">
                <atom:Alert Classes="test" Type="Success">Success Text</atom:Alert>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="More types"
            Description="There are 4 types of Alert: success, info, warning, error.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Alert Type="Success">Success Text</atom:Alert>
                <atom:Alert Type="Info">Info Text</atom:Alert>
                <atom:Alert Type="Warning">Warning Text</atom:Alert>
                <atom:Alert Type="Error">Error Text</atom:Alert>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Closable"
            Description="To show close button.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Alert Type="Warning" IsClosable="True">
                    Warning Text Warning Text Warning Text Warning Text Warning Text Warning TextWarning Text
                </atom:Alert>
                <atom:Alert Type="Error" IsClosable="True"
                            Description="Error Description Error Description Error Description Error Description Error Description Error Description">
                    Error Text
                </atom:Alert>
                <atom:Alert Type="Error" IsClosable="True"
                            Description="Error Description Error Description Error Description Error Description Error Description Error Description"
                            CloseIcon="{atom:IconProvider CloseSquareFilled}">
                    Error Text
                </atom:Alert>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Description"
            Description="Additional description for alert message.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Alert Type="Success"
                            Message="Success Text"
                            Description="Success Description Success Description Success Description" />
                <atom:Alert Type="Info"
                            Message="Info Text"
                            Description="Info Description Info Description Info Description Info Description" />
                <atom:Alert Type="Warning"
                            Message="Warning Text"
                            Description="Warning Description Warning Description Warning Description Warning Description" />
                <atom:Alert Type="Error"
                            Message="Error Text"
                            Description="Error Description Error Description Error Description Error Description" />
            </StackPanel>
        </desktop:ShowCaseItem>


        <desktop:ShowCaseItem
            Title="Description"
            Description="Additional description for alert message.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Alert Type="Success"
                            Message="Success Tips"
                            IsShowIcon="True" />
                <atom:Alert Type="Info"
                            Message="Informational Notes"
                            IsShowIcon="True" />
                <atom:Alert Type="Warning"
                            Message="Warning"
                            IsShowIcon="True"
                            IsClosable="True" />
                <atom:Alert Type="Error"
                            Message="Error"
                            IsShowIcon="True" />

                <atom:Alert Type="Success"
                            Message="Success Tips"
                            IsShowIcon="True"
                            Description="Detailed description and advice about successful copywriting." />
                <atom:Alert Type="Info"
                            Message="Informational Notes"
                            IsShowIcon="True"
                            Description="Additional description and information about copywriting." />
                <atom:Alert Type="Warning"
                            Message="Warning"
                            IsClosable="True"
                            IsShowIcon="True"
                            Description="This is a warning notice about copywriting." />
                <atom:Alert Type="Error"
                            Message="Error"
                            IsShowIcon="True"
                            Description="This is an error message about copywriting." />
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Custom action"
            Description="Custom action.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Alert Type="Success"
                            IsShowIcon="True"
                            IsClosable="true">
                    <atom:Alert.ExtraAction>
                        <atom:Button ButtonType="Text" SizeType="Small">UNDO</atom:Button>
                    </atom:Alert.ExtraAction>
                    Success Tips
                </atom:Alert>

                <atom:Alert Type="Error"
                            IsShowIcon="True"
                            Description="Error Description Error Description Error Description Error Description">
                    <atom:Alert.ExtraAction>
                        <atom:Button ButtonType="Default" SizeType="Small" IsDanger="True">Detail</atom:Button>
                    </atom:Alert.ExtraAction>
                    Error Text
                </atom:Alert>

                <atom:Alert Type="Warning"
                            IsClosable="true">
                    <atom:Alert.ExtraAction>
                        <atom:Button ButtonType="Text" SizeType="Small">Done</atom:Button>
                    </atom:Alert.ExtraAction>
                    Warning Text
                </atom:Alert>

                <atom:Alert Type="Info"
                            IsShowIcon="False"
                            IsClosable="true"
                            Description="Info Description Info Description Info Description Info Description">
                    <atom:Alert.ExtraAction>
                        <StackPanel Orientation="Vertical" Spacing="5">
                            <atom:Button ButtonType="Primary" SizeType="Small">Accept</atom:Button>
                            <atom:Button SizeType="Small" IsDanger="True" IsGhost="True">Decline</atom:Button>
                        </StackPanel>
                    </atom:Alert.ExtraAction>
                    Info Text
                </atom:Alert>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Loop Banner"
            Description="Show a loop banner.">
            <atom:Alert Type="Warning" IsShowIcon="True" IsMessageMarqueEnabled="True">
                I can be a React component, multiple React components, or just some text, Info Description Info Description Info Description Info Description
            </atom:Alert>
        </desktop:ShowCaseItem>
    </desktop:ShowCasePanel>
</UserControl>