Alert

The Alert component is used to convey important information to the user through the use contextual types icons and color. Many parts of an alert such as border, icon, and color can also be customized to fit almost any situation.

Playground

Alerts in their simplest form are a flat sheets of paper that display a message.

Options

API

Examples

Below is a collection of simple to complex examples.

Colors

Diffrent colors and variations of the Alert.

Border

Add a border using the border prop to either left, right, top or bottom.

Colored Border

The coloredBorder prop removes the alert background in order to accent the border prop.

Dense

The dense prop decreases the height of the alert to create a simple and compact style. When combined with the border prop the border thickness will be decreased to stay consistent with the style.

Dismissible

There is inbuilt dismiss functionality in Alert. You can also change the icon of the close button and call a function when the alert has been closed.

Icon

The icon slot allows you to and an icon at the beginning og the Alert. It will inherit the color and style of the Alert.

Outlined

The outlined prop inverts the style of an alert, inheriting the currently applied color, applying it to the text and border, and making its background transparent.

Transition

Use the transition prop to set the type of transition and use the transitionOpts prop to specify the options for the transition

Text

The text prop is a simple alert variant that applies a reduced opacity background of the provided color. Similar to other styled props, text can be combined with other props like dense, border, and outlined to create a unique and customized component.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.



Last Updated: 2021-06-15