Banner

A banner is a full-width component that can be used to show a message and action to the user.

Powered by

Important message

Installation

npx kibo-ui@latest add banner

Features

  • Controlled and uncontrolled visibility state
  • Customizable close handler
  • Optional inset variant with rounded corners
  • Composable API with Icon, Title, Action and Close components
  • Customizable via className prop
  • Adapts to primary color tokens

Examples

Inset

Important message

Different primary colors

Something's gone horribly wrong.

You're almost out of disk space.

You've been selected for a secret mission.