Components
Banner
In ProgressInformational strip for announcements, status messages, or promotions. The gradient variant matches the MNEE product's APY banner aesthetic; semantic variants use design tokens.
Gradient (default)
Rewards coming soon!
Earn a daily reward on your MNEE balance.
Semantic variants
Update available
Version 2.1 is ready to install.
Payment confirmed
Your transaction was processed.
Action required
Please verify your email address.
Payment failed
Your card was declined.
With action
Rewards coming soon!
Earn a daily reward on your MNEE balance.
Usage
import { Banner } from "@mnee-ui/ui"Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Primary text, rendered in bold |
| description | string | — | Secondary text below the title |
| variant | "gradient" | "info" | "success" | "warning" | "error" | "gradient" | Visual style — gradient uses teal→amber, others use semantic tokens |
| action | ReactNode | — | Optional element rendered on the right (e.g. a Button) |
| className | string | — | Layout utilities only (margin, padding, width) |