Back to Insomnia

Banner

packages/insomnia-component-docs/docs/Components/banner.mdx

7.1.11.0 KB
Original Source

Banner

Props

PropTypeRequiredDescription
type'info' | 'warning'YesType of banner to display
messageReact.ReactNodeYesMessage content to display
titlestringNoOptional title for the banner

Usage Examples

Info

tsx
<Banner type="info" title="info title" message="This is an info banner." />

Info without title

tsx
<Banner type="info" message="This is an info banner." />

Warning

tsx
<Banner type="warning" title="warnning title" message="This is an warnning banner." />

Styling

CSS Variables

The component uses the following CSS variables for theming:

  • --color-font: Banner text color
  • --color-surprise: Info banner background
  • --color-warning: Warning banner background

You can customize these variables in your CSS to theme the banner appearance.