Renders an alert container.

Use named :title and :description slots for canonical structure.

Examples

heex title="All alert variants" align="full" <div class="space-y-4"> <div> <h4 class="text-sm font-medium mb-2">Default</h4> <.alert> <CinderUI.Icons.icon name="circle-alert" /> <:title>Heads up!</:title> <:description> You can add components to your app using the install task. </:description> </.alert> </div> <div> <h4 class="text-sm font-medium mb-2">Destructive</h4> <.alert variant={:destructive}> <CinderUI.Icons.icon name="triangle-alert" /> <:title>Unable to deploy</:title> <:description> Your build failed. Check logs and try again. </:description> </.alert> </div> <div> <h4 class="text-sm font-medium mb-2">Success</h4> <.alert variant={:success}> <CinderUI.Icons.icon name="circle-check-big" /> <:title>Changes saved</:title> <:description> Your updates have been successfully saved to the server. </:description> </.alert> </div> <div> <h4 class="text-sm font-medium mb-2">Warning</h4> <.alert variant={:warning}> <CinderUI.Icons.icon name="triangle-alert" /> <:title>Deprecated API</:title> <:description> This endpoint will be removed in the next major version. </:description> </.alert> </div> <div> <h4 class="text-sm font-medium mb-2">Info</h4> <.alert variant={:info}> <CinderUI.Icons.icon name="info" /> <:title>FYI</:title> <:description> Additional information to help you understand the current situation. </:description> </.alert> </div> </div>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) - Defaults to nil. variant (:atom) - Defaults to :default. Must be one of :default, :destructive, :success, :warning, or :info. class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

inner_block (required) title * description

Renders a status badge.

Colors

:primary, :secondary, :destructive, :success, :warning, :info

Variants

:solid, :outline, :ghost, :link

Examples

heex title="Default badge" <.badge>New</.badge>

heex title="All colors and variants" align="full" <div class="space-y-6"> <div class="space-y-2"> <h4 class="text-sm font-medium text-muted-foreground">Primary</h4> <div class="flex gap-2 flex-wrap"> <.badge color={:primary} variant={:solid}>Solid</.badge> <.badge color={:primary} variant={:outline}>Outline</.badge> <.badge color={:primary} variant={:ghost}>Ghost</.badge> <.badge color={:primary} variant={:link}>Link</.badge> </div> </div> <div class="space-y-2"> <h4 class="text-sm font-medium text-muted-foreground">Secondary</h4> <div class="flex gap-2 flex-wrap"> <.badge color={:secondary} variant={:solid}>Solid</.badge> <.badge color={:secondary} variant={:outline}>Outline</.badge> <.badge color={:secondary} variant={:ghost}>Ghost</.badge> <.badge color={:secondary} variant={:link}>Link</.badge> </div> </div> <div class="space-y-2"> <h4 class="text-sm font-medium text-muted-foreground">Destructive</h4> <div class="flex gap-2 flex-wrap"> <.badge color={:destructive} variant={:solid}>Solid</.badge> <.badge color={:destructive} variant={:outline}>Outline</.badge> <.badge color={:destructive} variant={:ghost}>Ghost</.badge> <.badge color={:destructive} variant={:link}>Link</.badge> </div> </div> <div class="space-y-2"> <h4 class="text-sm font-medium text-muted-foreground">Success</h4> <div class="flex gap-2 flex-wrap"> <.badge color={:success} variant={:solid}>Solid</.badge> <.badge color={:success} variant={:outline}>Outline</.badge> <.badge color={:success} variant={:ghost}>Ghost</.badge> <.badge color={:success} variant={:link}>Link</.badge> </div> </div> <div class="space-y-2"> <h4 class="text-sm font-medium text-muted-foreground">Warning</h4> <div class="flex gap-2 flex-wrap"> <.badge color={:warning} variant={:solid}>Solid</.badge> <.badge color={:warning} variant={:outline}>Outline</.badge> <.badge color={:warning} variant={:ghost}>Ghost</.badge> <.badge color={:warning} variant={:link}>Link</.badge> </div> </div> <div class="space-y-2"> <h4 class="text-sm font-medium text-muted-foreground">Info</h4> <div class="flex gap-2 flex-wrap"> <.badge color={:info} variant={:solid}>Solid</.badge> <.badge color={:info} variant={:outline}>Outline</.badge> <.badge color={:info} variant={:ghost}>Ghost</.badge> <.badge color={:info} variant={:link}>Link</.badge> </div> </div> </div>

heex title="Badge with icon" <.badge color={:secondary}> <CinderUI.Icons.icon name="check" /> Verified </.badge>

## Screenshot

View live examples and full component docs.

## Attributes

color (:atom) - Defaults to :primary. Must be one of :primary, :secondary, :destructive, :success, :warning, or :info. variant (:atom) - Defaults to :solid. Must be one of :solid, :outline, :ghost, or :link. class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Empty-state block for no-data screens.

Example

<.empty_state>
  <:title>No projects</:title>
  <:description>Create your first project to get started.</:description>
</.empty_state>

Screenshot

View live examples and full component docs.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon
• title
• description
• action

Renders a flash notice.

Drop-in replacement for the Phoenix generated flash/1 core component. Accepts the same attributes and slots, so you can swap it in without changing any call sites.

To replace the default Phoenix flash, remove the flash/1 function from your core_components.ex and add import CinderUI.Components.Feedback (or use CinderUI.Components which imports all modules).

Examples

heex title="Info flash" <.flash kind={:info}>Settings saved.</.flash>

heex title="Error flash" <.flash kind={:error}>Unable to save changes.</.flash>

heex title="Success flash" <.flash kind={:success}>Workspace created.</.flash>

heex title="Warning flash" <.flash kind={:warning}>Trial ends in 3 days.</.flash>

Screenshot

View live examples and full component docs.

Attributes

• id (:string) - the optional id of flash container.
• flash (:map) - the map of flash messages to display. Defaults to %{}.
• title (:string) - Defaults to nil.
• kind (:atom) - used for styling and flash lookup. Must be one of :info, :error, :success, or :warning.
• Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

• inner_block - the optional inner block that renders the flash message.

Shows the flash group with standard titles and content.

Drop-in replacement for the Phoenix generated flash_group/1 core component. Includes the same client-error and server-error reconnection notices.

To replace the default, remove flash_group/1 from your core_components.ex.

Example

<.flash_group flash={%{"info" => "Saved", "error" => "Unable to complete request"}} />

Screenshot

View live examples and full component docs.

Attributes

• flash (:map) (required) - the map of flash messages.
• id (:string) - the optional id of flash container. Defaults to "flash-group".
• Global attributes are accepted.

Progress bar.

value is clamped between 0 and max.

Example

heex title="Progress indicator" align="full" <div class="space-y-2"> <div class="flex items-center justify-between text-sm"> <span>Deploy progress</span> <span>72%</span> </div> <.progress value={72} /> </div>

## Screenshot

View live examples and full component docs.

## Attributes

value (:integer) - Defaults to 0. max (:integer) - Defaults to 100. class (:string) - Defaults to nil. Global attributes are accepted.

Generic loading spinner.

Example

heex title="Inline spinner" <div class="inline-flex items-center gap-2 text-sm text-muted-foreground"> <.spinner /> Syncing changes </div>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted.