Azora Nexus

Basic

Default alert content with optional title and close action.

Good Morning! Start your day with some alerts.

Alert TitleAlert Text

Colors

Solid background alerts for the full Sneat color set.

I'm an alert with primary background color.

I'm an alert with secondary background color.

I'm an alert with success background color.

I'm an alert with info background color.

I'm an alert with warning background color.

I'm an alert with error background color.

Icons

Alerts can prepend contextual or custom icons.

Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.

Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit.

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Border

Borders can accent any side of the alert surface.

Good Morning! Start your day with some alerts.

Colored Border

Plain alerts that keep the background neutral and use a side color accent.

Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.

Cookie brownie tootsie roll pudding biscuit chupa chups.

Gingerbread jelly beans macaroon croissant souffle.

Muffin I love wafer pudding caramels jelly beans fruitcake.

Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.

Lemon drops tootsie roll liquorice marzipan lollipop.

Density

Compact, comfortable, and default alert spacing.

I'm a compact alert with a color of primary.

I'm a comfortable alert with the variant prop and a color of secondary.

I'm a default alert with the color of success.

Type

Contextual states provide default color and icon treatment.

I'm a alert with a type of info

I'm a alert with a type of success

I'm a alert with a type of warning

I'm a alert with a type of error

Closable

Close action hides the alert and can be reset.

Pudding wafer I love chocolate bar wafer chupa chups wafer. Cake gummies pudding gummies cake.

v-model support

Bound state can hide and restore an alert.

Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.

Outlined

Outlined alerts inherit color for text and border.

Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh.

Praesent venenatis metus at tortor pulvinar varius.

Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis.

Marshmallow jelly beans toffee. Sweet roll lemon drops muffin biscuit.

Tootsie roll candy canes wafer icing sweet jelly macaroon.

Jelly beans dragee jelly. Cotton candy danish chocolate cake.

Tonal

Tonal alerts use a reduced opacity background of the provided color.

Maecenas nec odio et ante tincidunt tempus.

Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit.

Vestibulum ullamcorper mauris at ligula. Nulla porta dolor.

Praesent blandit laoreet nibh. Praesent nonummy mi in odio.

Marzipan topping croissant cake sweet roll ice cream souffle chocolate.

Elevation

Shadow depth can be adjusted for raised alerts.

Elevation 5

I'm an alert with box shadow.

Prominent

Prominent alerts increase the icon presence.

Macaroon I love tiramisu I love wafer apple pie jelly beans shortbread.

Cotton candy tart tiramisu lollipop gummi bears oat cake cupcake macaroon.

Ice cream candy I love wafer bonbon gingerbread candy canes tiramisu.