Renders a back navigation link.

Examples

<.back navigate={~p"/posts"}>Back to posts</.back>

Attributes

• navigate (:any) (required)

Slots

• inner_block (required)

Renders a universal breadcrumb navigation that works for any page depth.

Accepts a list of breadcrumb items, where each item is a map with:

• :label (required) - The text to display
• :path (optional) - The navigation path. If nil, renders as plain text

Examples

<.breadcrumb items={[
  %{label: "Manage", path: ~p"/manage"},
  %{label: "Library", path: ~p"/manage/glam/library"},
  %{label: "Circulation", path: ~p"/manage/glam/library/circulation"},
  %{label: "Transactions", path: nil}
]} />

<.breadcrumb items={[
  %{label: "Home", path: ~p"/"},
  %{label: "Current Page", path: nil}
]} />

Attributes

• items (:list) (required)

Renders a button with navigation support.

Examples

<.button>Send!</.button>
<.button phx-click="go" variant="primary">Send!</.button>
<.button navigate={~p"/"}>Home</.button>

Attributes

• class (:string)
• variant (:string) - Must be one of "primary".
• Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "name", "value", "disabled"].

Slots

• inner_block (required)

Renders a reusable delete / confirm modal.

This builds on the existing modal/1 semantics and accepts JS commands for :on_cancel and :on_confirm. The inner block is used to render a descriptive message about what will be deleted.

Example:

<.delete_modal id="confirm-delete" show={@show_delete}
  title="Delete Role" confirm_label="Delete"
  on_cancel={JS.patch(~p"/items")} on_confirm={JS.push("confirm_delete", value: %{id: @item.id})}>
  Are you sure you want to delete this role? This action cannot be undone.
</.delete_modal>

The component uses existing project button classes so it fits the visual language of the app.

Attributes

• id (:string) (required)
• show (:boolean) - Defaults to false.
• title (:string) - Defaults to "Anda yakin?".
• confirm_label (:string) - Defaults to "Hapus".
• confirm_class (:string) - Defaults to "cancel-btn".
• on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
• on_confirm (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

• inner_block (required)

Renders flash notices.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

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, or :error.
• 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.

Examples

<.flash_group flash={@flash} />

Attributes

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

Renders a single GLAM card.

Attributes

• title (:string) (required)
• description (:string) (required)
• icon (:string) (required)
• count (:integer) (required)
• percentage (:float) (required)
• path (:string) (required)
• color (:string) (required)

Renders a header with title.

Slots

• inner_block (required)
• subtitle
• actions

Renders a Heroicon.

Heroicons come in three styles – outline, solid, and mini. By default, the outline style is used, but solid and mini may be applied by using the -solid and -mini suffix.

You can customize the size and colors of the icons by setting width, height, and background color classes.

Icons are extracted from the deps/heroicons directory and bundled within your compiled app.css by the plugin in your assets/tailwind.config.js.

Examples

<.icon name="hero-x-mark-solid" />
<.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />

Attributes

• name (:string) (required)
• class (:string) - Defaults to nil.

Renders an input with label and error messages.

A Phoenix.HTML.FormField may be passed as argument, which is used to retrieve the input name, id, and values. Otherwise all attributes may be passed explicitly.

Types

This function accepts all HTML input types, considering that:

• You may also set type="select" to render a <select> tag

• type="checkbox" is used exclusively to render boolean values

• For live file uploads, see Phoenix.Component.live_file_input/1

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information. Unsupported types, such as hidden and radio, are best written directly in your templates.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• label (:string) - Defaults to nil.
• value (:any)
• required_value (:boolean) - Defaults to false.
• type (:string) - Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "month", "number", "password", "search", "select", "tel", "text", "textarea", "time", "url", "week", or "hidden".
• field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
• errors (:list) - Defaults to [].
• checked (:boolean) - the checked flag for checkbox inputs.
• prompt (:string) - the prompt for select inputs. Defaults to nil.
• options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
• multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
• class (:string) - the input class to use over defaults. Defaults to nil.
• error_class (:string) - the input error class to use over defaults. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Renders a label.

Attributes

• for (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders a data list.

Examples

<.list>
  <:item title="Title">{@post.title}</:item>
  <:item title="Views">{@post.views}</:item>
</.list>

Slots

• item (required) - Accepts attributes:
  • title (:string) (required)

Renders a language/locale switcher dropdown.

Examples

<.locale_switcher />
<.locale_switcher class="my-custom-class" />

Attributes

• id (:string) - Defaults to "locale-switcher".
• class (:string) - Defaults to "".
• current_path (:string) - Defaults to "/".
• hook (:string) - Defaults to "LocaleSwitcher".

Renders a single member navigation card.

Attributes

• title (:string) (required)
• description (:string) (required)
• action_text (:string) (required)
• icon (:string) (required)
• path (:string) (required)
• color (:string) (required)

Renders members navigation cards.

Attributes

• members_stats (:map) (required)

Renders a modal.

Examples

<.modal id="confirm-modal">
  This is a modal.
</.modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another modal.
</.modal>

Attributes

• id (:string) (required)
• show (:boolean) - Defaults to false.
• on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

• inner_block (required)

Renders a recent member item.

Attributes

• member (:map) (required)

Renders a table with generic styling.

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id">{user.id}</:col>
  <:col :let={user} label="username">{user.username}</:col>
</.table>

Attributes

• id (:string) (required)
• rows (:any) (required)
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.

Slots

• col (required) - Accepts attributes:
  • label (:string)
• action - the slot for showing user actions in the last table column.

Provides dark vs light theme toggle based on themes defined in app.css.

See <head> in root.html.heex which applies the theme before page load.

Translates an error message using gettext.

Translates the errors for a field from a keyword list of errors.