Alert

The ty-alert component is designed to capture the user's attention and convey important information. The component is highly customizable with several visual variants like 'info', 'success', 'error', and 'warning'.

Usage

To include ty-alert in your project, you can use the following HTML structure:

Live Editor

<ty-alert title="Important Information"> This is your alert content. </ty-alert>

Result

Loading...

Neutral Alert

The neutral variant is the default style that provides a balanced, understated look.

General Information

HTML

<ty-alert variant="neutral" title="Neutral Alert">
  General Information
</ty-alert>

JavaScript

  <script>
    // Get a reference to the alert
    const alert = document.querySelector('ty-alert');

    // Listen for 'ty-close' event
    alert.addEventListener('ty-close', () => {
      console.log('Alert was closed!');
    });

    // Programmatically show the alert
    alert.show();

    // Programmatically hide the alert
    alert.hide();
  </script>

Info Alert

Use this variant to display informational messages.

Informational Message

HTML

<ty-alert variant="info" title="Info Alert"> Informational Message </ty-alert>

Success Alert

Use this variant to indicate a successful operation or task.

Operation Successful

HTML

<ty-alert variant="success" title="Success Alert">
  Operation Successful
</ty-alert>

Error Alert

Use this variant to indicate an error or unsuccessful operation.

Something went wrong

HTML

<ty-alert variant="error" title="Error Alert"> Something went wrong </ty-alert>

Warning Alert

Use this variant to indicate a warning or potential issue.

Caution: Proceed with Care

HTML

<ty-alert variant="warning" title="Warning Alert">
  Caution: Proceed with Care
</ty-alert>

API

Properties

Name	Description Type	Type	Default
variant	Sets the alert type	'neutral', 'info', 'success', 'error', 'warning'	'neutral'
title	Sets the alert title	String	''
hiddenOnClose	Determines if the alert should be hidden when closed	Boolean	false

Methods

Name	Description
show()	Makes the alert visible
hide()	Makes the alert hidden

Events

Name	Description
'ty-close'	Emit event when the alert is closed