# Alert

Component for displaying brief information of varying importance to the user, enriched with an icon.

# Most common usage scenario

<template>
  <SfAlert :message="message" :type="type" />
</template>
<script>
import { SfAlert } from "@storefront-ui/vue";
export default {
  components: {
    SfAlert,
  },
  data() {
    return {
      message: "Low in stock",
      type: "info",
    };
  },
};
</script>

# Props

  • message

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

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

# Slots

  • icon

    • Custom alert icon. Slot content will replace default icon <SfIcon/> tag.
    • bindings: icon
  • message

    • Custom message . Slot content will replace default message <span> tag.
    • bindings: message

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --alert-color
  • --alert-font
  • --alert-font-weight
  • --alert-font-size
  • --alert-font-line-height
  • --alert-font-family
  • --alert-message-margin

# Overridden other components CSS variables

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

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.