Notification Bar

Sometimes we want to draw the attention of our users throughout the site, our <NotificationBar /> component comes in handy here. To use, import from @mavelapp/ui:

import { NotificationBar } from '@marvelapp/ui';

You can set any background from the theme to it:

You have reached the limits of projects on the free plan

We've just launched User Testing. Available now on your Marvel plan

Your account is about to be downgraded.Upgrade

<NotificationBar bg="marvel">...</NotificationBar>
<NotificationBar bg="purple">...</NotificationBar>
<NotificationBar bg="orange">...</NotificationBar>

With icons

Icons can provide more clarity. Use a constant from @marvelapp/theme. If you’re using the component on a page with a menu button you can use the hasMenuButtonOnPage prop to take care of the padding.

Your card payment has been declined. Update your details to avoid stopping your account.

<NotificationBar bg="red" icon={SETTINGS_ICON}>
  ...
</NotificationBar>

Props

Prop

Type

Default

string

marvel

children

React.Element

–

color

string

white

hasMenuButtonOnPage

boolean

false

icon

array

–

onClickClose

func

–

size