Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Message

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Provide contextual information to users.

1
<Message variant="SUCCESS" content={{ content: 'Content of message' }} />

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set predefined styles for quick use. Access them through the variant prop:

1234
<Message variant="INFORMATIVE" title={{ content: 'Title' }} content={{ content: 'Content of message' }} />
<Message variant="SUCCESS" title={{ content: 'Title' }} content={{ content: 'Content of message' }} />
<Message variant="ERROR" title={{ content: 'Title' }} content={{ content: 'Content of message' }} />
<Message variant="WARNING" title={{ content: 'Title' }} content={{ content: 'Content of message' }} />

Icons

You can enhance the component by adding a few icons like:

  • An icon to notify the state of the message using the infoIcon prop.
  • An icon to close the message using the closeIcon prop.
1234567
<Message
  variant="INFORMATIVE"
  title={{ content: 'Title' }}
  content={{ content: 'Content of message' }}
  infoIcon={{ icon: 'ICON_INFO_CIRCLE' }}
  closeIcon={{ icon: 'ICON_X' }}
/>
Empty StateAccessibility
MessageDesign Specs