Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Confirmation Message

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Panel that provide feedback or the result of the user's previous action.

import { ConfirmationMessage } from '@kubit-ui-web/react-components'
1
<ConfirmationMessage variant="DEFAULT" title={{ content: 'Title' }} description={{ content: 'Description' }} />

Variants

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 this predefined style for its quick use. Access them through the variant prop:

1
<ConfirmationMessage variant="DEFAULT" title={{ content: 'Title' }} description={{ content: 'Description' }} />

Icon

You can enhance the component by adding an icon using the icon prop.

1234567
<ConfirmationMessage
  variant="DEFAULT"
  title={{ content: 'Title' }}
  description={{ content: 'Description' }}
  state="SUCCESS"
  decorativeElement={{element: {ICON: {icon: "ICON_CHECK_CIRCLE"}}}}
/>

State

State variant in confirmationMessage are used to track and visual reflecting the type of feedback. The icons and text stylying could depend on it. We have set three default states:

  • SUCCESS
  • WARNING
  • ERROR
12345678910
<ConfirmationMessage
  variant="DEFAULT"
  title={{ content: 'Title' }}
  description={{ content: 'Description' }}
  state="SUCCESS"
  decorativeElement={{element: {ICON: {icon: "ICON_CHECK_CIRCLE"}}}}
/>
<ConfirmationMessage
  variant="DEFAULT"
  title={{ content: 'Title' }}
BadgeAccessibility
Confirmation MessageDesign Specs