semantic-ui
  1. semantic-ui-message
PreviousNext

Semantic UI Message

Semantic UI Message is a user interface element that is used to display short messages to the users. It provides an easy-to-use syntax that enables developers to create consistent, intuitive, and visually appealing messages on their web pages.

Syntax

Semantic UI Message follows a simple syntax that includes a basic structure with various options for customization. The basic structure of a message includes:

<div class="ui message">
  <i class="close icon"></i>
  <div class="header">Message Header</div>
  <p>Message body</p>
</div>

Here are some of the commonly used options for customization:

  • Color: You can use different color classes to set the color of the message. For example, ui yellow message will set the message color to yellow.

  • Size: You can use different size classes to set the size of the message. For example, ui small message will set the message size to small.

  • Icon: You can use different icons to add an icon to the message. For example, <i class="info icon"></i> will add an information icon to the message.

  • Close Button: You can add a close button to the message by including the following HTML code: <i class="close icon"></i>

Use

Semantic UI Message is used to provide feedback or information to the user. It is commonly used in forms, validation messages, alerts, and notifications to improve the user experience on the web page. Messages provide a visual cue to the user, highlighting important information and improving the overall usability of the web page.

Importance

Semantic UI Message is an important UI element as it improves the overall user experience on the web page. It assists in providing feedback and information to the user, which is essential in improving the usability of the website. Additionally, Semantic UI Message adds a professional touch to the web page and enhances the overall aesthetic appeal.

Example

Here is an example of a Semantic UI Message:

<div class="ui message">
  <i class="close icon"></i>
  <div class="header">Message Header</div>
  <p>This is a sample message</p>
</div>

Summary

Semantic UI Message is a comprehensive UI element used for providing feedback and information to the user. It features an easy-to-use syntax with options for customization, enabling developers to create visually appealing messages on their web pages. The messages add value to the user experience, highlighting important information and improving usability.

MenuTable
Published on: