Notice

The Notice component is intended to display important information to a user

<template>
  <ci-notice>
    Lorem ipsum dolor sit amet.
  </ci-notice>
</template>

Icons

Use the icon prop to add an icon to your notice.

<template>
  <ci-notice icon="bell">
    Lorem ipsum dolor sit amet.
  </ci-notice>
</template>

Action

Use the action slot to add an action. This will render on the right side of the notice.

<template>
  <ci-notice icon="bell">
    Lorem ipsum dolor sit amet.
    <template #action>
      <div class="ci-text-xs">
        My Action
      </div>
    </template>
  </ci-notice>
</template>

Variant

Use variant to change the style and appearance of your notice. Default variant is information.

<template>
  <div>
    <ci-notice icon="alert-triangle" variant="information">
      Lorem ipsum dolor sit amet.
      <template #action>
        <ci-button variant="brand">
          My Action
        </ci-button>
      </template>
    </ci-notice>
    <ci-notice icon="bell" variant="error">
      Lorem ipsum dolor sit amet.
      <template #action>
        <div class="ci-text-xs">
          My Action
        </div>
      </template>
    </ci-notice>
    <ci-notice icon="bell" variant="warning">
      Warning
      <template #action>
        <div class="ci-text-xs">
          My Action
        </div>
      </template>
    </ci-notice>
  </div>
</template>