# BaseAlert

The BaseAlert can be used to create visual feedback for the user, usually following user interaction (e.g. submitting a form).

Example

# Dependencies

None.

# Props

Name	Type	Required	Default	Description
title	`String`	-	`""`	Optional title
status	`String`	-	`"error"`	Valid options: `"success"` `"warning"` `"error"`

# Slots

1 unnamed slot

# Variants

You can change the variant through the status property.

Error (default): .c-base-alert--error
Success: .c-base-alert--success
Warning: .c-base-alert--warning

# Example

Good

<!-- Default without title, status "error" -->
<BaseAlert>
  This is a BaseAlert for error messages.
</BaseAlert>

<!-- With title -->
<BaseAlert title="Error">
  This is a BaseAlert for error messages.
</BaseAlert>

<!-- Status "warning" -->
<BaseAlert title="Warning" status="warning">
  This is a BaseAlert for warning messages.
</BaseAlert>

<!-- Status "success" -->
<BaseAlert title="Success" status="success">
  This is a BaseAlert for success messages.
</BaseAlert>

<!-- Usually it's good to add a condition that
  changes depending on the users interaction.
  e.g. A success message should only show
  after the form is sucessfully submitted. -->
<BaseAlert
  v-if="showSuccessMessage"
  title="Success"
  status="success"
>
  This is a BaseAlert for success messages.
</BaseAlert>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Bad

<!-- BaseAlert has a content slot,
therefore it should not be self-closing. -->
<BaseAlert/>

<!-- Use the prop status for getting a variant. -->
<BaseAlert class="c-base-alert--success">
  This is a BaseAlert for error messages.
</BaseAlert>

1
2
3
4
5
6
7
8