lustre_ui - v1.0.0-rc.1

lustre/ui/alert

The alert element, sometimes called a “callout”, is used to direct the user’s attention away from the main content on the page and to some important information or context.

Common uses for the alert element include:

Anatomy

An alert is made up of different parts:

Recipes

Below are some recipes that show common uses of the alert element.

A title-only success alert:

import lustre/element/html
import lustre/ui/alert.{alert}

pub fn new_todo_added() {
  alert([alert.success()], [
    alert.title([], [html.text("New todo added to your list.")])
  ])
}

An error alert with indicator and content:

import lustre/element/html
import lustre/ui/alert.{alert}

pub fn delete_todo_failed() {
  alert([alert.danger()], [
    alert.indicator([], [icon.exclamation_triangle([])]),
    alert.title([], [html.text("Could not delete todo")]),
    alert.content([], [
      html.p([], [html.text("Check your internet connection and try again.")])
    ])
  ])
}

Customisation

The colour or type of an alert can be set to the corresponding colour palette in your theme by using one of the following attributes:

The border radius of an alert can be controlled while still using your theme’s configuration by using one of the following attributes:

It is possible to control some aspects of an alert’s styling through CSS variables. You may want to do this in cases where you are integrating lustre/ui into an existing design system and you want the alert element to match elements outside of this package.

The following CSS variables can set in your own stylesheets or by using the corresponding attribute functions in this module:

Functions

alert

</> 
pub fn alert(
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

The alert element, sometimes called a “callout”, is used to direct the user’s attention away from the main content on the page and to some important information or context.

Common uses for the alert element include:

  • Toasts that render unobtrusely over the main content, often in the corner of the page.

  • Callouts in documentation to provide additional or crucial information.

The colour or type of the alert can be changed by using one of the following attributes: primary, secondary, warning, danger, or successs.

This will render a <div> tag in your markup. If you would like to render a different element, use of instead.

background

</> 
pub fn background(value: String) -> Attribute(a)

By default, the alert element uses an appropriate background colour based on your theme configuration and chosen colour palette. You can use this function in conjunction with the other attributes in this module to manually override this colour.

This can be any CSS value that can be used in place of a colour, for example:

  • background("red")
  • background("#ffaff3")
  • background("var(--lustre-ui-primary-solid)")

border

</> 
pub fn border(value: String) -> Attribute(a)

By default, the alert element uses an appropriate border colour based on your theme configuration and chosen colour palette. You can use this function in conjunction with the other attributes in this module to manually override this colour.

This can be any CSS value that can be used in place of a colour, for example:

  • border(blue)
  • border(#ffaff3)
  • `border(“var(–lustre-ui-accent-strong)”)

content

</> 
pub fn content(
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

danger

</> 
pub fn danger() -> Attribute(a)

Adjust the alert’s colour to match your theme’s danger colour palette. The danger palette is typically used to highlight critical information before a user performs an action or to alert the user of an important error.

indicator

</> 
pub fn indicator(icon: Element(a)) -> Element(a)

An indicator that appears in the top-left of an alert. Indicators have a fixed size that can be controlled by setting the indicator_size value.

Indicators are typically icons or other visual cues.

indicator_size

</> 
pub fn indicator_size(value: String) -> Attribute(a)

By default, the alert element sets the size of the indicator to 16px. You can use this function in conjunction with the other attributes in this module to manually override this size.

This can be any CSS value that can be used in place of a size, for example:

  • indicator_size("12px")
  • indicator_size("2rem")
  • `indicator_size(“var(–lustre-ui-size-lg)”)

Note: indicators are always square.

of

</> 
pub fn of(
  element: fn(List(Attribute(a)), List(Element(a))) -> Element(a),
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

Render the given element function as an alert. This applies the "alert" role to the element, and gives it the class "lustre-ui-alert“.

padding

</> 
pub fn padding(x x: String, y y: String) -> Attribute(a)

By default, the alert element sets appropriate horizontal and vertical padding based on your theme configuration. You can use this function in conjunction with the other attributes in this module to manually override this padding.

This can be any CSS value that can be used in place of a size, for example:

  • padding("16px", "12px")
  • padding("1rem", "1rem")
  • padding("var(--lustre-ui-space-md)", "var(--lustre-ui-space-sm)")

This function is a shorthand for setting both padding_x and padding_y.

padding_x

</> 
pub fn padding_x(value: String) -> Attribute(a)

padding_y

</> 
pub fn padding_y(value: String) -> Attribute(a)

pill

</> 
pub fn pill() -> Attribute(a)

Set the alert’s border radius to your theme’s xl radius value. This is shorthand for radius(theme.radius.xl).

primary

</> 
pub fn primary() -> Attribute(a)

Adjust the alert’s colour to match your theme’s primary colour palette. The primary palette is typically used for alerts that provide additional information or context to an action.

radius

</> 
pub fn radius(value: String) -> Attribute(a)

round

</> 
pub fn round() -> Attribute(a)

Set the alert’s border radius to your theme’s md radius value. This is shorthand for radius(theme.radius.md).

secondary

</> 
pub fn secondary() -> Attribute(a)

Adjust the alert’s colour to match your theme’s secondary colour palette. The secondary palette is typically used for alerts that provide additional information or context to an action.

square

</> 
pub fn square() -> Attribute(a)

Remove the alert’s border radius, regardless of your theme’s configuration.

success

</> 
pub fn success() -> Attribute(a)

Adjust the alert’s colour to match your theme’s success colour palette. The success palette is typically used to inform the user that an action was successfully completed.

text

</> 
pub fn text(value: String) -> Attribute(a)

title

</> 
pub fn title(
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

The title element is a concise summary of the alert’s content or message. The title’s content is rendered with a medium font weight to distinguish it from any additional content, but this can be overriden by setting the title_weight value.

Note: A title’s content must fit on one line; any overflow is clipped and ellipses are shown.

title_margin

</> 
pub fn title_margin(value: String) -> Attribute(a)

title_weight

</> 
pub fn title_weight(value: String) -> Attribute(a)

warning

</> 
pub fn warning() -> Attribute(a)

Adjust the alert’s colour to match your theme’s warning colour palette. The warning palette is typically used to draw the user’s attention to additional information before they perform an action or to alert the user of a non-fatal error.

✨ Search Document