Alerts
The v-alert component is used to convey important information to the user through the
use contextual types icons and color. These default types come in in 4 variations: success, info, warning, and error.
Default icons are assigned which help represent different actions each type portrays.
Basic alerts
I'm a success alert.
I'm an info alert.
I'm a warning alert.
I'm an error alert.
Alerts with props
I'm an alert with a top border and red color
I'm an alert with a right border and blue-grey color
I'm an alert with a bottom border and pink color
I'm an alert with a border left type info
Dense
I'm a dense alert with a type of info
I'm a dense alert with the text prop and a type of success
I'm a dense alert with the border prop and a type of warning
I'm a dense alert with the outlined prop and a type of error
Dismissible
Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero,
non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero,
non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non,
euismod vitae, posuere imperdiet, leo.
Alerts with icon
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi.
Quisque ut nisi. Maecenas malesuada.
Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit. Donec orci lectus, aliquam ut,
faucibus non, euismod id, nulla. In ut quam vitae odio lacinia tincidunt.
Praesent congue erat at massa. Nullam vel sem. Aliquam lorem ante, dapibus in, viverra quis,
feugiat a, tellus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien,
a accumsan nisi mauris ac eros. Curabitur at lacus ac velit ornare lobortis.
Outlined alerts
Lorem Ipsum
Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi,
condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit.
Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat,
nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin,
ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
Praesent venenatis metus at tortor pulvinar varius. Aenean commodo ligula eget dolor.
Praesent ac massa at ligula laoreet iaculis. Vestibulum ullamcorper mauris at ligula.
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.
Suspendisse non nisl sit amet velit hendrerit rutrum. Nullam vel sem.
Pellentesque dapibus hendrerit tortor.
Prominent alerts
Nunc nonummy metus. Nunc interdum lacus sit amet orci.
Nullam dictum felis eu pede mollis pretium. Cras id dui.
Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.
Aenean ut eros et nisl sagittis vestibulum. Sed aliquam ultrices mauris.
Donec vitae orci sed dolor rutrum auctor.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Sed in libero ut nibh placerat accumsan.. Curabitur blandit mollis lacus.
Curabitur blandit mollis lacus.
Text alerts
Lorem Ipsum
Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus,
mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Proin viverra,
ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros.
Curabitur turpis.
Proin magna. Vivamus in erat ut urna cursus vestibulum. Etiam imperdiet imperdiet orci.
Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit.
Maecenas egestas arcu quis ligula mattis placerat. Praesent metus tellus,
elementum eu, semper a, adipiscing nec, purus.
Vestibulum ullamcorper mauris at ligula. Nulla porta dolor. Vestibulum facilisis,
purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.
Curabitur at lacus ac velit ornare lobortis.
Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus tempus.
Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Duis leo.
Transition alert
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum.
In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere.
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Phasellus nec sem in justo pellentesque facilisis. Phasellus magna.
Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.
In hac habitasse platea dictumst. Praesent turpis.
Rounded alert
Rounded Alert
Tile alert
Tile Alert