Info Bar
An announcement/alert bar component with glass styling, icons, actions, and dismissible functionality. Supports multiple variants, accent bars, and CSS enter animations.
Installation
$ npx shadcn@latest add @orecus/info-barDependencies:
lucide-react
Registry:
@orecus/color-utilsbutton
Component
Info bars for alerts, notifications, and messages with glass effects and accent colors.
Intent Variants
New feature available
Check out our latest updates and improvements.
Payment successful
Your transaction has been processed.
Scheduled maintenance
System will be unavailable on Sunday 2-4 AM.
Connection lost
Unable to reach the server. Please check your connection.
With Actions
Upgrade to Pro
Get access to advanced features and priority support.
Documentation updated
Dismissible
This alert can be dismissed
Click the X button to close.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Intent-based styling variant |
type | CardType | 'normal' | Glass effect variant |
invert | boolean | false | Invert glass overlay |
accentBar | 'none' | 'left' | 'top' | 'left' | Accent bar position |
accentColor | ThemeColor | — | Override accent color (defaults from variant) |
title | string | — | Main message title |
description | string | — | Secondary description text |
icon | React.ComponentType | — | Custom icon (defaults based on variant) |
actions | React.ReactNode | — | Action buttons/links |
dismissible | boolean | false | Show close button |
onDismiss | () => void | — | Callback when dismissed |
animation | 'none' | 'fade' | 'slide-down' | 'slide-left' | 'none' | Enter animation type (CSS-only) |
animationDuration | number | 500 | Animation duration in ms |