Breadcrumb

    Overview

    Use the Alert region template to display alerts, confirmations, and other action-oriented messages within the context of a page.

    Set Alert as Region Template.

    Examples

    1. Default

    Alert Region

    Region Body

    Region Template Options

    • Use DefaultYes
    • Alert IconsShow Default Icons
    • Alert TypeWarning
    • Alert DisplayHorizontal

    2. Wizard Style

    Alert Region

    Region Body

    Region Template Options

    • Use DefaultYes
    • Highlight BackgroundYes
    • Alert DisplayWizard
    • Alert IconsShow Default Icons
    • Alert TypeWarning

    3. Custom Icon

    Alert Region

    Region Body

    Region Template Options

    • Use DefaultYes
    • Alert IconsShow Custom Icons
    • Alert TypeInformation
    • Alert DisplayWizard

    Button Positions

    Alert Region with Buttons

    Your request has been submitted successfully. Please check again later in 30 minutes.

    Use Cases

    Order Created Successfully

    A confirmation email has been sent to you. This order will be delivered in one week.

    Access Denied

    You have insufficient privilege. Please contact your Administrator for more information.

    Template Options

    • General

      • Use Template Defaults
      • Highlight Background
        Set alert background color to that of the alert type (warning, success, etc.)

    • Alert Display

      Sets the layout of the Alert Region.

      • Horizontal
        Show horizontal alert with buttons to the right.
      • Wizard
        Show the alert in a wizard style region.

    • Alert Icons

      Sets how icons are handled for the Alert Region.

      • Hide Icons
        Hides alert icons
      • Show Default Icons
        Uses default icons for alert types.
      • Show Custom Icons
        Set custom icons by modifying the Alert Region's Icon CSS Classes property.

    • Alert Type

      Sets the type of alert which can be used to determine the icon, icon color, and the background color.

      • Warning
        Show a warning alert.
      • Danger
        Show an error or danger alert.
      • Information
        Show informational alert.
      • Success
        Show success alert.

    • Alert Title

      Determines how the title of the alert is displayed.

      • Visible - Default
      • Hidden
        Hides the Alert Title from being displayed.
      • Hidden but Accessible
        Visually hides the alert title, but assistive technologies can still read it.
    • Advanced

      Item Padding

      Sets the padding around items within this region.

      • Default
      • Slim Padding
        Reduces form item padding to 4px.
      • Remove Padding
        Removes padding between items.
    • Advanced

      Item Size

      Sets the size of the form items within this region.

      • Default
      • Large
      • X Large
    • Advanced

      Item Width

      Sets the width of the form items within this region.

      • Default
      • Stretch Form Fields
    • Advanced

      Label Alignment

      Set the label text alignment for items within this region.

      • Right
      • Left
        Align form labels to left.
    • Advanced

      Label Position

      Sets the position of the label relative to the form item.

      • Inline - Default
      • Show Form Labels Above
        Show form labels above input fields.
    • Advanced

      Top Margin

      Set the top margin for this region.

      • Default
      • None
        Removes the top margin for this region.
      • Small
        Adds a small top margin to the region.
      • Medium
        Adds a medium top margin to the region.
      • Large
        Adds a large top margin to the region.
    • Advanced

      Bottom Margin

      Set the bottom margin for this region.

      • Default
      • None
        Removes the bottom margin for this region.
      • Small
        Adds a small bottom margin to the region.
      • Medium
        Adds a medium bottom margin to the region.
      • Large
        Adds a large bottom margin to the region.
    • Advanced

      Left Margin

      Set the left margin for this region.

      • Default
      • None
        Removes the left margin from the region.
      • Small
        Adds a small left margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.
    • Advanced

      Right Margin

      Set the right margin for this region.

      • Default
      • None
        Removes the right margin from the region.
      • Small
        Adds a small right margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.