Banner

Кольоровий контейнер для показу важливих повідомлень, сповіщень чи виносок.

Живе демо

Варіанти

Це інформаційний банер із корисними відомостями.

Успіх! Зміни збережено.

Увага: цю дію неможливо скасувати.

Помилка: щось пішло не так.

Із власним вмістом

У банер можна вкласти будь-який вміст.

Файл успішно завантажено.

Використання

Базове

<template>
  <orio-banner variant="info">
    This is an informational message.
  </orio-banner>
</template>

З іконкою та кнопкою

<template>
  <orio-banner variant="success">
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <orio-icon name="check" size="20" />
      <span>Operation completed successfully!</span>
    </div>
  </orio-banner>
</template>

Пропси

Проп	Тип	За замовчуванням	Опис
variant	'danger' | 'alert' | 'success' | 'info'	'info'	Колірний варіант банера

Слоти

Слот	Опис
default	Вміст банера — будь-яка коректна розмітка