Alert

Alerts are available as a web component using the skin-alert tag.

Attributes:

id: Unique ID (required if dismissible)
data-hide-duration: Duration (in minutes) to keep the alert hidden after dismissed (optional)
data-hide-transition: Duration (in milliseconds) of the dismissal transition, 250 by default (optional)
data-icon: Any valid skin-icon name (optional)
data-style: Alternate style (optional)

Valid styles include:

bt: 4px top border
br: 4px right border
bb: 4px bottom border
bl: 4px left border

Examples

This is an unstyled alert

This is a custom alert with bl style applied

This is a default styled alert with bl style applied

This is an informational alert with bt style applied

This is a warning alert

This is an error alert

This is a success alert


                
                <!-- Unstyled -->
<skin-alert
        class="mb-6"
        data-icon="megaphone">
    This is an unstyled alert
</skin-alert>

<!-- Custom -->
<skin-alert
        class="tu-bg-default border-0 border-theme-primary mb-6"
        data-icon="megaphone"
        data-style="bl">
    This is a custom alert with <code>bl</code> style applied
</skin-alert>

<!-- Default -->
<skin-alert
        id="skin-alert-default"
        class="tc-style-default mb-6"
        data-hide-duration="0"
        data-icon="megaphone"
        data-style="bl">
    This is a default styled alert with <code>bl</code> style applied
</skin-alert>

<!-- Info -->
<skin-alert
        class="tc-style-info-light mb-6"
        data-icon="information-circle"
        data-style="bt">
    This is an informational alert with <code>bt</code> style applied
</skin-alert>

<!-- Warning -->
<skin-alert
        class="tc-style-warning-light mb-6"
        data-icon="exclamation-triangle">
    This is a warning alert
</skin-alert>

<!-- Error -->
<skin-alert
        class="tc-style-error-light mb-6"
        data-icon="x-circle">
    This is an error alert
</skin-alert>

<!-- Success -->
<skin-alert
        class="tc-style-success-light"
        data-icon="check-circle">
    This is a success alert
</skin-alert>