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.
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.