Skip to content
Related Articles

Related Articles

Semantic-UI Message Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI offers a message component for users to display. There are different variations of messages. We will create a UI showing the different variations of messages. After creating this basic template you can work with different components of Semantic UI. 

Semantic UI Message Variations class:

  • compact: When a user wants the message size to occupy the same width as its content.
  • floating: When the user wants to float a message over some UI content.
  • attached: When the user wants to attach the message to other content.
  • warning: When the user wants to display warning messages.
  • info: When the user wants to format a message to display information.
  • positive: When the user wants to format a message to display positive or successful information.
  • negative: When the user wants to format a message to display negative or error information.
  • colored: When the user wants to format a message to different colors.
  • size: When the user wants to format a message with different sizes.

Syntax:

<div class="ui compact message">
  ....
</div>

Example 1: The following example demonstrates messages using compact, floating, and message classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui compact message">
         
<p>Compact Message in UI.</p>
 
    </div>
 
    <div class="ui floating message">
         
<p>Floating message !!</p>
 
    </div>
     
    <div class="ui  message">
         
<p>Non floating message ( Basic Message )</p>
 
    </div>
</body>
 
</html>


Output:

Example 2: The following example demonstrates messages using attached, warning, info, and message classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui attached message">
        <div class="header">
            Welcome to Geeks for Geeks!
        </div>
         
<p>Fill out your email to get started .</p>
 
    </div>
 
    <div class="ui form attached fluid segment">
        <input placeholder="Email" type="text">
    </div>
     
    <div class="ui warning message">
         
<p>Warning for the user !! </p>
 
    </div>
     
    <div class="ui info message">
         
<p>Display information for the user. </p>
 
    </div>
</body>
 
</html>


Output:

Example 3: The following example demonstrates messages using positive, negative, and message classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui positive message">
         
<p>Congrats , your request has been approved. </p>
 
    </div>
    <div class="ui negative message">
         
<p>Sorry , your request has not been approved. </p>
 
    </div>
</body>
 
</html>


Output:

Example 4: The following example demonstrates messages using red, orange, yellow, olive, green, and message classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui red message">Red</div>
    <div class="ui orange message">Orange</div>
    <div class="ui yellow message">Yellow</div>
    <div class="ui olive message">Olive</div>
    <div class="ui green message">Green</div>
</body>
 
</html>


Output:

Example 5: The following example demonstrates messages using mini, tiny, small, large, massive, and message classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui mini message">
        Mini Message !!
    </div>
    <div class="ui tiny message">
        Tiny Message !!
    </div>
    <div class="ui small message">
        Small Message !!
    </div>
    <div class="ui large message">
        Large Message !!
    </div>
    <div class="ui massive message">
        Massive Message !!
    </div>
</body>
 
</html>


Output:

Reference: https://semantic-ui.com/collections/message.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!