# Notification

Component used for informative function f.e products added to cart or successful login.

# Most common usage scenario

<template>
  <SfNotification
    :visible="visible"
    :title="title"
    :message="message"
    :action="action"
    :type="type"
    @click:close="visible = false"
  />
</template>
<script>
import { SfNotification } from "@storefront-ui/vue";
export default {
  components: {
    SfNotification,
  },
  data() {
    return {
      visible: true,
      title: "Added to Cart",
      message: "This is informative message for the user.",
      action: "View cart",
      type: "info",
    };
  },
};
</script>

# Props

  • visible

    • Visibility of the Notification. Default value is false.
    • type: boolean
    • defaultValue: false
  • title

    • Title that will be displayed in Notification.
    • type: string
    • defaultValue: ""
  • message

    • Message that will be displayed in Notification.
    • type: string
    • defaultValue: ""
  • action

    • Action that will be displayed in Notification.
    • type: string
    • defaultValue: ""
  • type

    • Notification type ("secondary", "info", "success", "warning", "danger"). Check "Knobs" section to see how they look like.
    • type: string
    • defaultValue: "secondary"

# Slots

  • icon

    • Custom notification icon. Slot content will replace default icon.
    • bindings: icon
  • title

    • Custom title. Slot content will replace default title.
    • bindings: title
  • message

    • Custom message. Slot content will replace default message.
    • bindings: message
  • action

    • Custom action. Slot content will replace default action.
    • bindings: action, actionHandler
  • close

    • Custom notification close icon. Slot content will replace default close icon.
    • bindings: closeHandler

# Events

  • click:action

    • Event for action button
  • click:close

    • Event for close icon

# CSS modifiers

None.

# CSS custom properties (variables)

  • --notification-align-items
  • --notification-max-width
  • --notification-padding
  • --notification-box-shadow
  • --notification-border-radius
  • --notification-background
  • --notification-color
  • --notification-font
  • --notification-font-weight
  • --notification-font-size
  • --notification-font-line-height
  • --notification-font-family
  • --notification-title-display
  • --notification-title-font
  • --notification-title-font-weight
  • --notification-title-font-size
  • --notification-title-font-line-height
  • --notification-title-font-family
  • --notification-action-display
  • --notification-action-color
  • --notification-action-font
  • --notification-action-text-decoration
  • --notification-icon-margin
  • --notification-close-top
  • --notification-close-right

# Overridden other components CSS variables

  • --icon-color
  • --icon-size

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.