Message

The message component is used to display and highlight important info to a user.

Usage

The message component is a simple wrapper around your content. It will apply various background, border and text styles for you automatically.

<template>
  <ci-message>
    Please upload a CSV to display recipient list
  </ci-message>
</template>

Variant

Use variant to change the style and appearance of your message.

<template>
  <DemoGrid>
    <ci-message variant="default">
      Default message
    </ci-message>
    <ci-message variant="danger">
      Danger message
    </ci-message>
    <ci-message variant="info">
      Info message
    </ci-message>
  </DemoGrid>
</template>

Align

Use align to change the position of your message.

<template>
  <DemoGrid>
    <ci-message>
      Center text
    </ci-message>
    <ci-message align="left">
      Left text
    </ci-message>
    <ci-message align="right">
      Right text
    </ci-message>
  </DemoGrid>
</template>