Alerts

Inline status messages in info / success / warning / error, default or accent border.

Preview

Heads up

This is an informational alert.

Successfully uploaded.

You have no credits left. .

Something went wrong

We weren't able to process your payment. Try again.

React preview

LiveView (HEEx)

alias DesignSystem.UI.Alerts
alias Phoenix.LiveView.JS

<Alerts.alert color="info" title="Heads up">
  Something to know.
</Alerts.alert>

<Alerts.alert
  color="success"
  id="upload-ok"
  on_dismiss={JS.hide(to: "#upload-ok")}
>
  Successfully uploaded.
</Alerts.alert>

<Alerts.alert color="warning" variant="accent">
  Almost out of credits.
</Alerts.alert>

React (JSX)

import { useState } from "react"
import { Alert } from "../ui/index.mjs"

const [show, setShow] = useState(true)

<Alert color="info" title="Heads up">Something to know.</Alert>

{show && (
  <Alert color="success" onDismiss={() => setShow(false)}>
    Successfully uploaded.
  </Alert>
)}

<Alert color="warning" variant="accent">
  Almost out of credits.
</Alert>