Renders a link. This basically wraps Phoenix.Component.link/1 with some overridable attributes, in particular class for consistent, DRY link default styling.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.

• navigate (:string) - Navigates from a LiveView to a new LiveView. The browser page is kept, but a new LiveView process is mounted and its content on the page is reloaded. It is only possible to navigate between LiveViews declared under the same router Phoenix.LiveView.Router.live_session/3. Otherwise, a full browser redirect is used.

  Defaults to nil.

• patch (:string) - Patches the current LiveView. The handle_params callback of the current LiveView will be invoked and the minimum content will be sent over the wire, as any other LiveView diff.

  Defaults to nil.

• href (:any) - Uses traditional browser navigation to the new location. This means the whole page is reloaded on the browser.

  Defaults to nil.

• method (:string) - The HTTP method to use with the link. This is intended for usage outside of LiveView and therefore only works with the href={...} attribute. It has no effect on patch and navigate instructions. In case the method is not get, the link is generated inside the form which sets the proper information. In order to submit the form, JavaScript must be enabled in the browser.

  Defaults to "get".

• csrf_token (:any) - a boolean or custom token to use for links with an HTTP method other than get. Defaults to true.

• replace (:boolean) - when using :patch or :navigate, should the browser's history be replaced with pushState? (overridable, required).

• class (:any) - merge/override default classes of the code element (overridable, :css_classes).

• Global attributes are accepted. additional HTML attributes added to the a tag.

Slots

• inner_block (required) - the content rendered inside of the a tag.

Renders a button.

Supports:

• Any button type
• Any anchor type
  • LivePatch
  • LiveRedirect
  • External href links

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>
<.button navigate={~p"/home"}>Home</.button>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• confirm (:string) - text to display in a confirm dialog before emitting click event. Defaults to nil.
• csrf_token (:string) - Defaults to nil.
• disabled (:boolean) - Defaults to false.
• href (:any)
• icon_name (:string) - the name of the icon to display (nil for none); see icon/1 for details. Defaults to nil.
• loading (:boolean) - display a loading spinner. Defaults to false.
• method (:string) - Defaults to "get".
• navigate (:string)
• patch (:string)
• ping (:boolean) - show a ping indicator. Defaults to false.
• replace (:boolean) - Defaults to false.
• type (:string) - type of the button. Defaults to "button".
• color (:string) - the color of the button (overridable, required).
• size (:string) - the size of the button (overridable, required).
• variant (:string) - style of button (overridable, required).
• class (:any) - (overridable, :css_classes).
• icon_class (:any) - (overridable, :css_classes).
• ping_class (:any) - (overridable, :css_classes).
• ping_animation_class (:any) - (overridable, :css_classes).
• Global attributes are accepted. Supports all globals plus: ["download", "hreflang", "referrerpolicy", "rel", "target", "form", "name", "value"].

Slots

• inner_block (required) - the content of the button.

Renders a code block.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• source (:string) (required) - the code snippet.
• id (:string) (required)
• copy (:boolean) - (overridable, required).
• copy_label (:string) - (overridable, required).
• copy_message (:string) - (overridable).
• language (:string) - language of the code snippet. Defaults to "elixir".
• class (:any) - merge/override default classes of the code element (overridable, :css_classes).
• copy_class (:any) - (overridable, :css_classes).

A color scheme switch component.

• Toggle through light, dark, and system color schemes
• Optionally show labels for each scheme
• Optionally override the default labels for each scheme with label_system, label_dark, and label_light
• Optionally override the default icons for each scheme with icon_system, icon_dark, and icon_light

Note:

This requires several things to work:

• darkMode: 'class' in your Tailwind config
• color_scheme_switcher_js/1 added to the page's <head> before app.js
• Pyro's PyroColorSchemeHook hook added to your hooks in app.js

Examples

<.color_scheme_switcher />

<.color_scheme_switcher scheme="light" />
<.color_scheme_switcher scheme="dark" />
<.color_scheme_switcher scheme="system" />

<.color_scheme_switcher show_labels />

<.color_scheme_switcher label_system="System" label_dark="Dunkel" label_light="Hell" />
<.color_scheme_switcher icon_system="hero-computer-desktop-solid" icon_dark="hero-moon-solid" icon_light="hero-sun-solid" />copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• scheme (:atom) - the scheme used to initialize the color scheme switcher (overridable, required).
• label_system (:string) - the label for the system scheme (overridable).
• label_dark (:string) - the label for the dark scheme (overridable).
• label_light (:string) - the label for the light scheme (overridable).
• icon_system (:string) - the icon for the system scheme (overridable).
• icon_dark (:string) - the icon for the dark scheme (overridable).
• icon_light (:string) - the icon for the light scheme (overridable).
• show_labels (:boolean) - show or hide labels. Defaults to false.
• class (:any) - (overridable, :css_classes).

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• id (:string) (required)
• value (:string) (required) - text to copy.
• label (:string) - button label, defaults to value. Defaults to nil.
• disabled (:boolean) - Defaults to false.
• icon_name (:string) - the name of the icon to display (nil for none); see icon/1 for details. Defaults to nil.
• ttl (:integer) - how long to show the flash message after copying (overridable, required).
• color (:string) - the color of the button (overridable, required).
• shape (:string) - shape of the button (overridable, required).
• size (:string) - the size of the button (overridable, required).
• variant (:string) - style of button (overridable, required).
• message (:string) - message to display after copying (overridable, required).
• class (:any) - (overridable, :css_classes).
• icon_class (:any) - (overridable, :css_classes).
• Global attributes are accepted.

Generates a generic error message.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• icon_name (:string) - the name of the icon; see icon/1 for details (overridable, required).
• class (:any) - (overridable, :css_classes).
• icon_class (:any) - (overridable, :css_classes).

Slots

• inner_block (required)

Renders flash notices.

Examples

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

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• flash (:map) - the map of flash messages to display. Defaults to %{}.
• autoshow (:boolean) - whether to auto show the flash on mount (overridable, required).
• close (:boolean) - whether the flash can be closed (overridable, required).
• close_icon_name (:string) - (overridable, required).
• icon_name (:string) - (overridable, required).
• hide_js (:any) - (overridable, required).
• show_js (:any) - (overridable, required).
• title (:string) - (overridable).
• ttl (:integer) - (overridable, required).
• kind (:string) - used for styling and flash lookup (overridable, required).
• style_for_kind (:string) - used for styling a flash with a different kind (overridable).
• class (:any) - (overridable, :css_classes).
• control_class (:any) - (overridable, :css_classes).
• close_button_class (:any) - (overridable, :css_classes).
• close_icon_class (:any) - (overridable, :css_classes).
• message_class (:any) - (overridable, :css_classes).
• progress_class (:any) - (overridable, :css_classes).
• title_class (:any) - (overridable, :css_classes).
• title_icon_class (:any) - (overridable, :css_classes).
• Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

• inner_block - the optional inner block to render the flash message.

Shows the flash group with titles and content.

Examples

<.flash_group flash={@flash} />copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• flash (:map) (required) - the map of flash messages to display.
• include_kinds (:list) - the kinds of flashes to display (overridable, required).
• class (:any) - (overridable, :css_classes).
• Global attributes are accepted. the arbitrary HTML attributes to add to the flash tray.

Renders a header with title and optional subtitle/actions.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• class (:any) - (overridable, :css_classes).
• title_class (:any) - (overridable, :css_classes).
• subtitle_class (:any) - (overridable, :css_classes).
• actions_class (:any) - (overridable, :css_classes).

Slots

• inner_block (required)
• subtitle
• actions

Renders an icon.

Tip

See the Heroicons website to preview/search the available icons.

Additionally, there are long-term plans to add more icon libraries.

Examples

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

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• name (:string) (required) - the icon name.
• class (:any) - (overridable, :css_classes).
• Global attributes are accepted. the arbitrary HTML attributes for the svg container. Supports all globals plus: ["fill", "stroke", "stroke-width"].

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.

Examples

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

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• autofocus (:boolean) - enable autofocus hook to reliably focus input on mount. Defaults to false.
• checked (:boolean) - the checked flag for checkbox inputs.
• description (:string) - Defaults to nil.
• errors (:list) - Defaults to [].
• field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
• id (:any) - Defaults to nil.
• label (:string) - Defaults to nil.
• multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
• name (:any)
• options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
• prompt (:string) - the prompt for select inputs. Defaults to nil.
• type (:string) - Defaults to "text".
• value (:any)
• clear_on_escape (:boolean) - clear input value on pressing Escape (overridable, required).
• tz (:string) - timezone. Defaults to "Etc/UTC".
• get_tz_options (:any) - a 0 arity function that returns a list of valid timezones (overridable, required).
• tz_options (:list) - Defaults to nil.
• class (:any) - class of the field container element (overridable, :css_classes).
• input_class (:any) - class of the input element (overridable, :css_classes).
• input_check_label_class (:any) - class of the label element for a check input (overridable, :css_classes).
• input_datetime_zoned_wrapper_class (:any) - class of the input wrapper element for a datetime zoned input (overridable, :css_classes).
• description_class (:any) - class of the field description (overridable, :css_classes).
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Slots

• inner_block

Renders a label.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• for (:string) - Defaults to nil.
• class (:any) - (overridable, :css_classes).

Slots

• inner_block (required)

Renders a description list.

Examples

<.list>
  <:item title="Title"><%= @post.title %></:item>
  <:item title="Views"><%= @post.views %></:item>
</.list>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• class (:any) - (overridable, :css_classes).
• dd_class (:any) - (overridable, :css_classes).
• dt_class (:any) - (overridable, :css_classes).

Slots

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

Renders a modal.

Examples

<.modal id="confirm-modal">
  Are you sure?
  <:confirm>OK</:confirm>
  <:cancel>Cancel</:cancel>
</.modal>copy

JS commands may be passed to the :on_cancel and on_confirm attributes for the caller to react to each button press, for example:

<.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
  Are you sure you?
  <:confirm>OK</:confirm>
  <:cancel>Cancel</:cancel>
</.modal>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• id (:string) (required)
• show (:boolean) - Defaults to false.
• on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
• on_confirm (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
• show_js (:any) - (overridable, required).
• hide_js (:any) - (overridable, required).
• class (:any) - (overridable, :css_classes).

Slots

• inner_block (required)
• title
• subtitle
• confirm
• cancel

Renders a navigation link, taking into account whether the URI is the current page.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• label (:string) (required) - the label of of the link.
• uri (:string) (required) - the URI of the link.
• current_uri (:string) (required) - the current URI of the page.
• class (:any) - the class of the navigation link (overridable, :css_classes).

A progress element. Styling the progress element is tricky, so this wraps it with some nice conveniences.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• max (:integer) - Defaults to 100.
• value (:integer) - Defaults to 0.
• color (:string) - the color of the progress bar (overridable, required).
• size (:string) - the size of the progress bar (overridable, required).
• class (:any) - the class of the progress bar (overridable, :css_classes).
• Global attributes are accepted.

Renders a simple form.

Examples

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:email]} label="Email"/>
  <.input field={@form[:username]} label="Username" />
  <:actions>
    <.button>Save</.button>
  </:actions>
</.simple_form>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• for (:any) (required) - the datastructure for the form.
• as (:any) - the server side parameter to collect all input under. Defaults to nil.
• class (:any) - (overridable, :css_classes).
• actions_class (:any) - (overridable, :css_classes).
• Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target", "multipart"].

Slots

• inner_block (required)
• actions - the slot for form actions, such as a submit button.

A slide-over component.

Example

<%= if @slide_over do %>
  <.slide_over origin={@slide_over} max_width="sm" title="Slide Over">
    <p>
      This is a slide over.
    </p>
  </.slide_over>
<% end %>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• close_icon_name (:string) - (overridable, required).
• title (:string) - the title of the slide-over.
• id (:string) - Defaults to "slide-over".
• origin (:string) - (overridable, required).
• max_width (:string) - (overridable, required).
• hide_js (:any) - (overridable, required).
• close_even_name (:string) - the name of the event to send when the slide-over is closed. Defaults to "close_slide_over".
• close_slide_over_target (:string) - the specific live component to target for the close event, e.g. close_slide_over_target={@myself}. Defaults to nil.
• class (:any) - (overridable, :css_classes).
• overlay_class (:any) - (overridable, :css_classes).
• wrapper_class (:any) - (overridable, :css_classes).
• header_class (:any) - (overridable, :css_classes).
• header_inner_class (:any) - (overridable, :css_classes).
• header_title_class (:any) - (overridable, :css_classes).
• header_close_button_class (:any) - (overridable, :css_classes).
• content_class (:any) - (overridable, :css_classes).
• close_icon_class (:any) - (overridable, :css_classes).
• Global attributes are accepted.

Slots

• inner_block (required)

A simple spinner component.

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• show (:boolean) - show or hide spinner. Defaults to true.
• size (:string) - the size of the spinner (overridable, required).
• class (:any) - (overridable, :css_classes).
• Global attributes are accepted.

Renders a simple 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>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• id (:string)
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.
• rows (:list) (required)
• class (:any) - (overridable, :css_classes).
• action_class (:any) - (overridable, :css_classes).
• action_td_class (:any) - (overridable, :css_classes).
• action_wrapper_class (:any) - (overridable, :css_classes).
• tbody_class (:any) - (overridable, :css_classes).
• td_class (:any) - (overridable, :css_classes).
• th_action_class (:any) - (overridable, :css_classes).
• th_label_class (:any) - (overridable, :css_classes).
• thead_class (:any) - (overridable, :css_classes).
• tr_class (:any) - (overridable, :css_classes).

Slots

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

A tooltip component.

• JS hook that "nudges" tooltip into view
• Simple props for tooltip text and custom icon
• Optional slots for icon and/or tooltip content

Examples

<.tooltip id="tooltip-1" tooltip="A default tooltip!" />
<.tooltip id="tooltip-2"
          icon_name="hero-light-bulb-solid"
          tooltip="Custom icon." />
<.tooltip id="tooltip-3">
  <:icon>?</:icon>
  <div class="bg-red-500 text-white p-4 w-48 shadow-lg rounded">
    Custom tooltip slot and custom icon slot.
  </div>
</.tooltip>copy

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• id (:string) (required)
• tooltip (:string) - Defaults to nil.
• vertical_offset (:string) - (overridable, required).
• horizontal_offset (:string) - (overridable, required).
• icon_name (:string) - the name of the icon; see icon/1 for details (overridable, required).
• class (:any) - (overridable, :css_classes).
• tooltip_class (:any) - (overridable, :css_classes).
• tooltip_text_class (:any) - (overridable, :css_classes).
• icon_class (:any) - (overridable, :css_classes).

Slots

• icon
• inner_block