navy
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
vue
<template>
<orio-banner variant="info">
This is an informational message.
</orio-banner>
</template>With Icon and Button
vue
<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 |