Alert
The Alerts in their simplest form are a flat sheets of paper that display a message. Below is a collection of simple to complex examples. Diffrent colors and variations of the Add a border using the The The There is inbuilt dismiss functionality in 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. The Use the 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
API
Examples
Colors
Alert.Border
border prop to either left, right, top or bottom.Colored Border
coloredBorder prop removes the alert background in order to accent the border prop.Dense
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
Alert. You can also change the icon of the close button and call a function when the alert has been closed.Icon
Outlined
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
transition prop to set the type of transition and use the transitionOpts prop to specify the options for the transitionText
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.