@leafygreen-ui/banner NPM

Banner

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/banner

NPM

npm install @leafygreen-ui/banner

Example

<Banner>This is the banner content</Banner>

Output HTML

<div role="alert" class="leafygreen-ui-zvv1x8">
  <svg
    width="16"
    height="16"
    role="img"
    viewBox="0 0 16 16"
    class="leafygreen-ui-1e46tsl"
  >
    <title>Edit Icon</title>
    <path
      d="M11.352 6.648l-2-2L11 3l2 2-1.648 1.648zM6 12l-3 1 1-3 4.648-4.648 2 2L6 12z"
      fill="currentColor"
      fill-rule="evenodd"
    />
  </svg>
  <span class="leafygreen-ui-1kr3ls8">This is the banner content.</span>
</div>

Properties

Prop	Type	Description	Default
`variant`	`'info'`, `'warning'`, `'danger'`, `'success'`	Sets the variant for the Banner	`'info'`
`dismissible`	`boolean`	Determines whether or not the Banner is dismissible	`false`
`onClose`	`React.MouseEventHandler`	Callback fired when dismiss button is clicked	`() => {}`
`image`	`React.ReactElement`	Illustration that will replace default Icon when the prop is supplied
`baseFontSize`	`13`, `16`	Determines `font-size` for body copy in Callout component	`13`
`darkMode`	`boolean`	Determines if the component renders in dark theme	`false`
...	native `div` attributes	Any other props will be spread on the root `div` element