Top
Notification - Stacking & positioning
Notification
Notifications can be displayed in multiple positions on the screen and stacked in various ways. The default stacking is ['bottom','left'], which means that new notifications make the stack grow towards the bottom of the screen and then wrap towards the left of the screen. This means that the first notification is displayed in the top-right of the screen.
Additionally, new notifications can be pushed to the start of the list, or to the end of the list, depending on the value of push (defaults to "start").
When 'center' is used for stacking - so you want to center the notifications to one of the sides of the screen (or constrain region), wrapping is not possible. Valid values for center stacking are:
  • ['top', 'center']: stacks from top to bottom centered
  • ['bottom', 'center']: stacks from bottom to top centered
  • ['left', 'center']: stacks from left to right centered
  • ['right', 'center']: stacks from right to left centered
When notifications are stacked and displayed on the screen, by default, they are constrained to the browser viewport. The stacking is specified in two directions, one main direction, and then the second one, used for wrapping. As soon as notifications can no longer fit into the constrain region (the viewport, or another region), they wrap (with the exception of "center" stacking) to fit into the specified constrain region and with the specified constrain offset. If you don't want notifications to wrap, use stackingWrap=false
Configuring the space between two or more notifications can be done by using the offset prop. The offset can be a number, or an object with top,left,bottom,right.