AisAlert

AisAlert highlights user messages. Alerts may contain error messages or other important data that should be brought to the user's attention. Use title, the default slot, and details to specify the alert's body.

Validation Errors

Please review the following validation errors.

• Validation error 1
• Validation error 2

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
</script>

<template>
  <AisAlert
      variant="danger"
      title="Validation Errors"
      :details="[
        'Validation error 1',
        'Validation error 2'
    ]"
  >
    Please review the following validation errors.
  </AisAlert>
</template>

Props

variant

The variant prop conveys the type of message being presented. The accepted values are: default, primary, secondary, info, success, warning, danger. The default value is default.

Default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio nam enim, saepe exercitationem repellat totam?

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
  import { AisField } from '@ais-public/ais-components';
  import { AisSelect } from '@ais-public/ais-components';
  import { ref } from 'vue';
  import { variants } from '@/util/variants-util';
  import { capitalizeFirst } from '@/util/util';

  const selectedVariant = ref('default');
</script>

<template>
  <div class="grid gap-y-4">
      <AisAlert :variant="selectedVariant" :title="capitalizeFirst(selectedVariant)">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Optio nam enim, saepe exercitationem repellat totam?
      </AisAlert>
    <AisField label="Variant">
      <AisSelect v-model="selectedVariant" :options="variants" />
    </AisField>
  </div>
</template>

title

The title prop specifies featured text that appears at the top of the alert. See the default slot for details on specifying the alert's message.

Award nominations are due by next Thursday

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
</script>

<template>
  <AisAlert variant="info"
    title="Award nominations are due by next Thursday"
  />
</template>

details

The details prop accepts an array of strings, which will be shown as a bulleted list under the alert's message. If you plan to use the details slot, you can instead pass in an array of objects to build a custom detail list.

You should be aware of these details:

• Detail 1
• Detail 2

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
</script>

<template>
  <AisAlert
    :details="[
      'Detail 1',
      'Detail 2'
    ]"
  >
    You should be aware of these details:
  </AisAlert>
</template>

v-model

v-model drives an alert's visibility. v-model accepts a boolean and is required for dissmissible alerts. AisAlert maintains no internal state, so it depends on its v-model to capture update:modelValue events. See Vue's docs.

dismissible

The dismissible boolean prop specifies if the alert is closable. If true, a close button will appear in the alert's upper-righthand corner. The default value is false. Dismissible alerts must use v-model to drive the alert's visibility.

Dismissible

Click the close icon to dismiss this alert.

<script setup>
  import { ref } from 'vue';
  import { AisAlert } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  const showAlert = ref(true);
</script>

<template>
  <div>
    <AisAlert
        title="Dismissible"
        v-model="showAlert"
        dismissible
    >
      Click the close icon to dismiss this alert.
    </AisAlert>
    <transition name="alert-fade">
      <AisButton v-show="!showAlert"
          variant="secondary"
          @click="showAlert = !showAlert"
          press fast hover
      >
        Show alert
      </AisButton>
    </transition>
  </div>
</template>

icon

The icon prop accepts either an FontAwesome object or a string specifying one our core icons. If no icon prop is specified, a variant default will be used.

Variant default icon

No icon specified.

Custom icon

Core icon specified

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
</script>

<template>
  <div class="grid gap-y-4">
    <AisAlert
      variant="secondary"
      title="Variant default icon"
    >
      No icon specified.
    </AisAlert>
    <AisAlert
      variant="secondary"
      title="Custom icon"
      icon="required">
      Core icon specified
    </AisAlert>
  </div>
</template>

noIcon

noIcon is a boolean prop. When it is true, the alert will only show an icon if one is explicitly specified with the icon prop. No default variant icon will be used.

• Fulfills a major requirement and may fulfill a GE requirement
• Meets the Natural Sciences with Lab requirement for the College of Liberal Arts nd Sciences

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
</script>

<template>
  <AisAlert no-icon
    :details="[
      'Fulfills a major requirement and may fulfill a GE requirement',
      'Meets the Natural Sciences with Lab requirement for the College of Liberal Arts nd Sciences'
    ]"
  />
</template>

transition

The transition boolean prop specifies if the alert will appear and disappear with a fade transition. The default value is true.

Fade

Appear and disappear with a fade

Use Transition

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
  import { AisCheckbox } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { ref, computed } from 'vue';

  let visible = ref(true)
  let useTransition = ref(true)
  let buttonLabel = computed(() => visible.value ? 'Hide Alert' : 'Show Alert')
  const msg1 = 'Appear and disappear with a fade'
  const msg2 = 'Appear and disappear with no transition'
  const message = computed(() => useTransition.value ? msg1 : msg2)
</script>

<template>
  <div class="grid gap-y-6">
      <AisAlert dismissible v-model="visible"
        title="Fade"
        :transition="useTransition"
      >
        {{message}}
      </AisAlert>

      <div class="flex gap-8">
        <AisButton variant="secondary" @click="visible = !visible">
          {{buttonLabel}}
        </AisButton>
        <AisCheckbox v-model="useTransition">
          Use Transition
        </AisCheckbox>
      </div>

  </div>
</template>

Slots

default

Use the default slot, the tag body, to specify the alert's primary message. The message will display between the tite and details if all three are specified. The slot props icon, hasIcon, and hasTitle are exposed to the slot if you want to build a custom layout in the body of the alert.

The quick brown fox jumps over the lazy dog.

<script setup>
  import { AisAlert } from '@ais-public/ais-components';
</script>

<template>
  <AisAlert>
    The quick brown fox jumps over the lazy dog.
  </AisAlert>
</template>

title

Use the title slot to customize the markup for the alert's title. The title prop is passed as a slot prop along with a hasTitle flag. The slot resides in a single-column grid with the default and details slot with a gap of gap-y-1.

details

Use the details slot to customize the markup for the alert's details array. The default implementation expects an array of strings and displays them in an unordered list. Using the details slot, developers could pass an array of object and create a more intricate detail list. The slot resides in a single-column grid with the default and details slot with a gap of gap-y-1.

icon

Use the icon slot to customize the presentation of the icon prop. The slot flexes with the title, body, details grid. This slot should be used sparingly, and it is most likely only needed to match customizations in the other slots.

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
details	Array		[]	Array of strings that will appear as a bulleted list below the main message.	false
dismissLabel	String		'Close'	Value for the aria-label attribute on the dismiss button	false
dismissible	Boolean		false	When set, enables the close button	false
icon	Undefined		undefined	Optional header icon. Accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons	false
modelValue	Boolean		true	v-model controls the visibility of the alert	false
noIcon	Boolean		false	When noIcon is true, do not use the variant default icon	false
title	String		''	Bold text that appears at the top of the alert	false
transition	Boolean		true	When set to true, enables a transition on the component. Currently, fade is the only implemented transition.	false
variant	String		'default'	Applies one of the theme color variants to the component.	false

Slots

Name	Scoped	Description
default		Scoped slot for custom rending the content between the alert title and the alert details
details		Scoped slot for custom rending the alert details
icon		Scoped slot for custom rending the alert icon
title		Scoped slot for custom rending the alert title

Events

Event	Arguments	Description
update:modelValue