Phoenix UI

Phoenix UI home page
  1. Getting Started
  2. Installation: Tailwind CLI

Link

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Examples

Below you can view various demos with example markup.

Variants

The alert component comes with three variants: filled, outlined, and standard (default).

Severity

The alert component comes with four severities: error, warning, info (default), and success.

API

API documentation for the component. Learn about imports and available attributes.

Import

There are multiple ways to import components.


    # PhoenixUI macro which imports all components
    use PhoenixUI
    # Or import component individually
    import PhoenixUI.Components.Alert
    

Attributes

Below is a list of attributes that can be applied to the component.

Name Type Default Description
HTML attribute any Supports all HTML attributes.
align :center | :inherit | :justify | :left | :right :inherit Set the text-align on the component.
color any framework-provided color :slate The text color to use.
element Any HTML Element :p HTML element to use.
extend_class string Adds additional classes.
margin bool true If true, the text will have margin.
phx-{any} binding Supports all Phoenix DOM element bindings.
variant :h1 | :h2 | :h3 | :h4 | :p :p The links to use.