Alert

Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user.

Types

In the Appwrite console, we use two types of alerts:

Class	Type
`alert`	Inline	Inline alerts present additional information to the user related to content within a form or a body of text.
`alert is-standalone`	Standalone	Alert Standalone is based Alert type Inline
`alert is-action`	Action	Alert action is based Alert type Inline
`alert-sticky`	Sticky	Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action.

States

In the Appwrite console, we use five states of alerts:

Class	Type
-	Default	Use this alert to provide general information to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a default alert

            Some description about the alert sent to the user.

This is a standalone alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a standalone alert

            Some description about the alert sent to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

          

            This is a default alert

            Some description about the alert sent to the user.


          

            

              Secondary call to action

            

            

              Call to action

Alert Sticky Title

Provide contextual feedback messages for typical user actions.


      

        

          

        

        

        

          Alert Sticky Title

          Provide contextual feedback messages for typical user actions.

Class	Type
`is-info`	Info	Use this alert to provide additional information or tips to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a default alert

            Some description about the alert sent to the user.

This is a standalone alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a standalone alert

            Some description about the alert sent to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

          

            This is a default alert

            Some description about the alert sent to the user.


          

            

              Secondary call to action

            

            

              Call to action

Alert Sticky Title

Provide contextual feedback messages for typical user actions.


      

        

          

        

        

        

          Alert Sticky Title

          Provide contextual feedback messages for typical user actions.

Class	Type
`is-success`	Success	Use this alert to inform the user of a task that has been completed successfully.

This is a default alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a default alert

            Some description about the alert sent to the user.

This is a standalone alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a standalone alert

            Some description about the alert sent to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

          

            This is a default alert

            Some description about the alert sent to the user.


          

            

              Secondary call to action

            

            

              Call to action

Alert Sticky Title

Provide contextual feedback messages for typical user actions.


      

        

          

        

        

        

          Alert Sticky Title

          Provide contextual feedback messages for typical user actions.

Class	Type
`is-warning`	Warning	Use this alert to warn the user that action may be required depending on the context.

This is a default alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a default alert

            Some description about the alert sent to the user.

This is a standalone alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a standalone alert

            Some description about the alert sent to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

          

            This is a default alert

            Some description about the alert sent to the user.


          

            

              Secondary call to action

            

            

              Call to action

Alert Sticky Title

Provide contextual feedback messages for typical user actions.


      

        

          

        

        

        

          Alert Sticky Title

          Provide contextual feedback messages for typical user actions.

Class	Type
`is-danger`	Danger/Error	Use this alert to warn the user about errors, and how they can fix the problem.

This is a default alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a default alert

            Some description about the alert sent to the user.

This is a standalone alert

Some description about the alert sent to the user.


      

        

          

            

          

          

          

            This is a standalone alert

            Some description about the alert sent to the user.

This is a default alert

Some description about the alert sent to the user.


      

        

          

          

            This is a default alert

            Some description about the alert sent to the user.


          

            

              Secondary call to action

            

            

              Call to action

Alert Sticky Title

Provide contextual feedback messages for typical user actions.


      

        

          

        

        

        

          Alert Sticky Title

          Provide contextual feedback messages for typical user actions.

Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application.

Do

Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary.

Don't

Show overly generic or patronizing messages in your alerts.

Alert

Types

States

This is a default alert

This is a default alert

This is a standalone alert

This is a standalone alert

This is a default alert

This is a default alert

Alert Sticky Title

Alert Sticky Title

This is a default alert

This is a default alert

This is a standalone alert

This is a standalone alert

This is a default alert

This is a default alert

Alert Sticky Title

Alert Sticky Title

This is a default alert

This is a default alert

This is a standalone alert

This is a standalone alert

This is a default alert

This is a default alert

Alert Sticky Title

Alert Sticky Title

This is a default alert

This is a default alert

This is a standalone alert

This is a standalone alert

This is a default alert

This is a default alert

Alert Sticky Title

Alert Sticky Title

This is a default alert

This is a default alert

This is a standalone alert

This is a standalone alert

This is a default alert

This is a default alert

Alert Sticky Title

Alert Sticky Title

Best Practice

Do

Don't