Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Alert

The r-alert component is a versatile messaging component designed to display important information to users. It supports multiple types of alerts to convey different levels of severity and importance.

Usage

Use alerts to display success messages, error messages, warnings, and informational messages. Each type of alert is styled appropriately to grab the user's attention and convey the correct level of urgency.

Examples

alert-basic.vue
alert-types.vue
alert-icon.vue
alert-permanent.vue
Edit this page
Last Updated: 6/18/24, 2:22 PM
Contributors: Cesar Level
Next
Avatar