Banner

A Banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Installation

The Banner component is part of the design system. Import it from the UI package.

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

Usage

Use Banner with a variant (brand, mobile, modal, card), optional title, description, icon, and actions. Copy the example below to get started.

KWT

<Banner
  variant="brand"
  title="KWT"
  icon={<MobileLogo logo="KWT" size={48} />}
/>

Variants

Copy any example below to use in your project. Each variant is suited for different contexts (brand hero, mobile promo, modal, card).

Brand Banner

KWT

Mobile Promotional Banner

KWT Conversion Pre-Application

Only KWT conversion applicants can participate in the KWT version DeCT Super Save.

Modal Banner

Let's trade MSQ daily!

Daily Trading Event - 24.5.29(Wed)~6.18(Tue)

Card Banner

World's first

Blockchain real economy based coin

Venture Company Certification

Innovative Growth Type

API Reference

The Banner component displays a prominent message with optional icon, actions, and dismiss. It supports four variants and three sizes.

Prop	Type	Default
variant	"brand" \| "mobile" \| "modal" \| "card"	—
size	"sm" \| "md" \| "lg"	—
title	React.ReactNode	—
description	React.ReactNode	—
icon	React.ReactNode	—
action	{ label, onClick?, variant? }	—
secondaryAction	{ label, onClick?, variant? }	—
dismissible	boolean	—
onDismiss	() => void	—

Banner also accepts all standard HTMLDivElement attributes.

interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "brand" | "mobile" | "modal" | "card"
  size?: "sm" | "md" | "lg"
  title?: React.ReactNode
  description?: React.ReactNode
  icon?: React.ReactNode
  gradient?: { from: string; to: string }
  backgroundImage?: string
  action?: {
    label: string
    onClick?: () => void
    variant?: "primary" | "secondary" | "outline"
  }
  secondaryAction?: {
    label: string
    onClick?: () => void
    variant?: "primary" | "secondary" | "outline"
  }
  dismissible?: boolean
  onDismiss?: () => void
  children?: React.ReactNode
}