Banner

A colored container component for displaying important messages, notifications, or callouts.

Live Demo

Variants

This is an info banner with helpful information.

Success! Your changes have been saved.

Warning: This action cannot be undone.

Error: Something went wrong.

With Custom Content

You can put any content inside the banner.

Your file has been uploaded successfully.

Usage

Basic

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

With Icon and Button

<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>

Props

Prop	Type	Default	Description
variant	'danger' | 'alert' | 'success' | 'info'	'info'	Banner color variant

Slots

Slot	Description
default	Banner content - can be any valid markup