Mokri

Preview

Heads up

We launched something new. Check out our latest features and improvements.

Installation

<> import.ts

import { Banner } from "@/components/ui/banner"

Code

<> component.tsx

import { Banner } from "@/components/ui/banner"

<Banner />

API Reference

Banner

A dismissible notice for announcements, success, warnings, info, or errors.

<> import.ts

import { Banner, BannerPresets } from "@/components/ui/banner"

Props

Prop	Type	Default	Description
`title`	`string`	—	Heading text displayed prominently
`description`	`string`	—	Optional supporting text under the title
`variant`	`"default" \| "success" \| "warning" \| "error" \| "info" \| "gradient"`	`"default"`	Visual style and icon of the banner
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Adjusts spacing and typography scale
`dismissible`	`boolean`	`false`	Shows a close button and enables dismissal
`onDismiss`	`() => void`	—	Called when the close button is clicked
`action`	`{ label: string; onClick: () => void }`	—	Optional call-to-action button configuration
`className`	`string`	`""`	Additional CSS classes on the container
`children`	`React.ReactNode`	—	Custom content rendered under description
`headerStyle`	`boolean`	`false`	Removes border radius and adjusts padding for header areas

Examples

Example 1

<> example.tsx

// Basic banner
<Banner title="Heads up" description="We launched something new." />

Example 2

<> example.tsx

// Success and dismissible
<Banner
  variant="success"
  title="Saved"
  description="Your changes have been saved."
  dismissible
  onDismiss={() => console.log('dismissed')}
/>

Example 3

<> example.tsx

// Warning with action
<Banner
  variant="warning"
  title="Scheduled maintenance"
  description="Service will be unavailable Sunday 2–4 AM EST."
  action={{ label: 'Details', onClick: () => console.log('details') }}
/>

Example 4

<> example.tsx

// Header style for layout headers
<Banner
  headerStyle
  variant="info"
  title="Welcome"
  description="Here is what changed recently."
/>

Example 5

<> example.tsx

// Using presets
<Banner {...BannerPresets.announcement} />

Presets

announcement

Info preset with title, description and a Learn More action

maintenance

Warning preset, dismissible, for planned downtime notices

success

Success preset, dismissible, for positive confirmations

error

Error preset with a Retry action and dismissible control