Alert


Alerts can be used to display important information like feedback on why an action failed or wether it succeeded.

Because most alerts can be dismissed the Alert component is stateful by default. You can use the variant UncontrolledAlert if you don't want to manage the closed status by yourself. If you don't provide theisOpen and the toggle property theAlert will not be closeable.

Color

Alerts can be colored like most other components. Use the color of the alert to visualize the type of information in contains. Use info for information that doesn't require the attention of the user.danger should be used to for alerts that indicate a failure.

Uncontrolled Alert

Uncontrolled alerts handle their opened state by themselves which means they can be closed without requiring their state to be managed by their parent component. They are the component of choice for simple use-cases.

State

The isOpen property controls the visibility of the alert. The toggle property can be used to configure a callback that gets called when the user clicks the close button.

Fade animation

The animation can be disabled using the fade attribute. It is set to true by default but can be turned off. This property can be applied to both UncontrolledAlert and Alert

Links in Alerts

The special alert-link class can be applied to links in alerts so that their color matches the color of the surrounding alert.

Alert (extends HTMLElement)

PropertyType
color?"primary" | "secondary" | "dark" | "white" | "danger"
transition?FadeProps
isOpen?boolean
toggle?boolean

UncontrolledAlert (extends HTMLElement)

PropertyType
color?"primary" | "secondary" | "dark" | "white" | "danger"
transition?FadeProps
VSETH
VSETH

Copyright 2021 VSETH - Verband der Studierenden an der ETH