Renders a back navigation link.

examples

Examples

<.back navigate={~p"/posts"}>Back to posts</.back>
<.back icon_name="hero-arrow-left" navigate={~p"/"}>
  Go back to the about page.
</.back>

attributes

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, :tails_classes, required).
• icon_class (:any) - (overridable, :tails_classes, required).
• navigate (:any) (required)

slots

Slots

• inner_block (required)

Renders a button.

Supports:

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

examples

Examples

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

attributes

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".
• case (:string) - The case of the text (overridable, required).Must be one of "uppercase", "normal-case", "lowercase", or "capitalize".
• 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).
• class (:any) - (overridable, :tails_classes, required).
• icon_class (:any) - (overridable, :tails_classes, required).
• ping_class (:any) - (overridable, :tails_classes, required). Global attributes are accepted.

slots

Slots

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

Generates a generic error message.

attributes

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).
• icon_class (:any) - (overridable, :tails_classes).
• class (:any) - (overridable, :tails_classes, required).

slots

Slots

• inner_block (required)

Renders flash notices.

examples

Examples

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

attributes

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, :tails_classes, required).
• control_class (:any) - (overridable, :tails_classes).
• close_button_class (:any) - (overridable, :tails_classes).
• close_icon_class (:any) - (overridable, :tails_classes).
• message_class (:any) - (overridable, :tails_classes, required).
• progress_class (:any) - (overridable, :tails_classes, required).
• title_class (:any) - (overridable, :tails_classes, required).
• title_icon_class (:any) - (overridable, :tails_classes). Global attributes are accepted.

slots

Slots

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

Shows the flash group with titles and content.

examples

Examples

<.flash_group flash={@flash} />

attributes

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, :tails_classes, required). Global attributes are accepted.

Renders a header with title and optional subtitle/actions.

attributes

Attributes

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

slots

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

Examples

<.icon name="hero-arrow-left" />

<.icon name="hero-arrow-right-solid" class="block" />

attributes

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• class (:any) - (overridable, :tails_classes, required).
• name (:string) (required) - The icon name.Must be one of "hero-arrow-left-circle", "hero-arrow-left-circle-solid", "hero-arrow-left-circle-mini", "hero-fire", "hero-fire-solid", "hero-fire-mini", "hero-qr-code", "hero-qr-code-solid", "hero-qr-code-mini", "hero-chevron-down", "hero-chevron-down-solid", "hero-chevron-down-mini", "hero-globe-europe-africa", "hero-globe-europe-africa-solid", "hero-globe-europe-africa-mini", "hero-film", "hero-film-solid", "hero-film-mini", "hero-wrench-screwdriver", "hero-wrench-screwdriver-solid", "hero-wrench-screwdriver-mini", "hero-bars-arrow-down", "hero-bars-arrow-down-solid", "hero-bars-arrow-down-mini", "hero-arrow-down-on-square-stack", "hero-arrow-down-on-square-stack-solid", "hero-arrow-down-on-square-stack-mini", "hero-chat-bubble-left-ellipsis", "hero-chat-bubble-left-ellipsis-solid", "hero-chat-bubble-left-ellipsis-mini", "hero-device-phone-mobile", "hero-device-phone-mobile-solid", "hero-device-phone-mobile-mini", "hero-adjustments-vertical", "hero-adjustments-vertical-solid", "hero-adjustments-vertical-mini", "hero-exclamation-triangle", "hero-exclamation-triangle-solid", "hero-exclamation-triangle-mini", "hero-cube", "hero-cube-solid", "hero-cube-mini", "hero-tv", "hero-tv-solid", "hero-tv-mini", "hero-rectangle-group", "hero-rectangle-group-solid", "hero-rectangle-group-mini", "hero-paint-brush", "hero-paint-brush-solid", "hero-paint-brush-mini", "hero-arrow-uturn-right", "hero-arrow-uturn-right-solid", "hero-arrow-uturn-right-mini", "hero-presentation-chart-bar", "hero-presentation-chart-bar-solid", "hero-presentation-chart-bar-mini", "hero-chevron-double-right", "hero-chevron-double-right-solid", "hero-chevron-double-right-mini", "hero-home-modern", "hero-home-modern-solid", "hero-home-modern-mini", "hero-video-camera", "hero-video-camera-solid", "hero-video-camera-mini", "hero-inbox-arrow-down", "hero-inbox-arrow-down-solid", "hero-inbox-arrow-down-mini", "hero-clipboard-document-list", "hero-clipboard-document-list-solid", "hero-clipboard-document-list-mini", "hero-view-columns", "hero-view-columns-solid", "hero-view-columns-mini", "hero-folder-open", "hero-folder-open-solid", "hero-folder-open-mini", "hero-currency-pound", "hero-currency-pound-solid", "hero-currency-pound-mini", "hero-forward", "hero-forward-solid", "hero-forward-mini", "hero-hand-thumb-up", "hero-hand-thumb-up-solid", "hero-hand-thumb-up-mini", "hero-arrow-up-on-square", "hero-arrow-up-on-square-solid", "hero-arrow-up-on-square-mini", "hero-inbox", "hero-inbox-solid", "hero-inbox-mini", "hero-bell", "hero-bell-solid", "hero-bell-mini", "hero-squares-2x2", "hero-squares-2x2-solid", "hero-squares-2x2-mini", "hero-chat-bubble-bottom-center-text", "hero-chat-bubble-bottom-center-text-solid", "hero-chat-bubble-bottom-center-text-mini", "hero-document-duplicate", "hero-document-duplicate-solid", "hero-document-duplicate-mini", "hero-sparkles", "hero-sparkles-solid", "hero-sparkles-mini", "hero-bars-3-bottom-left", "hero-bars-3-bottom-left-solid", "hero-bars-3-bottom-left-mini", "hero-table-cells", "hero-table-cells-solid", "hero-table-cells-mini", "hero-chat-bubble-oval-left-ellipsis", "hero-chat-bubble-oval-left-ellipsis-solid", "hero-chat-bubble-oval-left-ellipsis-mini", "hero-arrow-down-tray", "hero-arrow-down-tray-solid", "hero-arrow-down-tray-mini", "hero-bars-3", "hero-bars-3-solid", "hero-bars-3-mini", "hero-rocket-launch", "hero-rocket-launch-solid", "hero-rocket-launch-mini", "hero-squares-plus", "hero-squares-plus-solid", "hero-squares-plus-mini", "hero-play", "hero-play-solid", "hero-play-mini", "hero-minus", "hero-minus-solid", "hero-minus-mini", "hero-arrow-small-up", "hero-arrow-small-up-solid", "hero-arrow-small-up-mini", "hero-window", "hero-window-solid", "hero-window-mini", "hero-x-mark", "hero-x-mark-solid", "hero-x-mark-mini", "hero-arrow-down-right", "hero-arrow-down-right-solid", "hero-arrow-down-right-mini", "hero-scale", "hero-scale-solid", "hero-scale-mini", "hero-at-symbol", "hero-at-symbol-solid", "hero-at-symbol-mini", "hero-speaker-x-mark", "hero-speaker-x-mark-solid", "hero-speaker-x-mark-mini", "hero-bars-arrow-up", "hero-bars-arrow-up-solid", "hero-bars-arrow-up-mini", "hero-beaker", "hero-beaker-solid", "hero-beaker-mini", "hero-bug-ant", "hero-bug-ant-solid", "hero-bug-ant-mini", "hero-language", "hero-language-solid", "hero-language-mini", "hero-ticket", "hero-ticket-solid", "hero-ticket-mini", "hero-shopping-cart", "hero-shopping-cart-solid", "hero-shopping-cart-mini", "hero-list-bullet", "hero-list-bullet-solid", "hero-list-bullet-mini", "hero-identification", "hero-identification-solid", "hero-identification-mini", "hero-gift-top", "hero-gift-top-solid", "hero-gift-top-mini", "hero-square-2-stack", "hero-square-2-stack-solid", "hero-square-2-stack-mini", "hero-trophy", "hero-trophy-solid", "hero-trophy-mini", "hero-clipboard-document", "hero-clipboard-document-solid", "hero-clipboard-document-mini", "hero-bookmark-square", "hero-bookmark-square-solid", "hero-bookmark-square-mini", "hero-adjustments-horizontal", "hero-adjustments-horizontal-solid", "hero-adjustments-horizontal-mini", "hero-folder-minus", "hero-folder-minus-solid", "hero-folder-minus-mini", "hero-arrow-long-right", "hero-arrow-long-right-solid", "hero-arrow-long-right-mini", "hero-magnifying-glass-circle", "hero-magnifying-glass-circle-solid", "hero-magnifying-glass-circle-mini", "hero-moon", "hero-moon-solid", "hero-moon-mini", "hero-calculator", "hero-calculator-solid", "hero-calculator-mini", "hero-bars-3-bottom-right", "hero-bars-3-bottom-right-solid", "hero-bars-3-bottom-right-mini", "hero-share", "hero-share-solid", "hero-share-mini", "hero-arrow-uturn-left", "hero-arrow-uturn-left-solid", "hero-arrow-uturn-left-mini", "hero-globe-americas", "hero-globe-americas-solid", "hero-globe-americas-mini", "hero-cube-transparent", "hero-cube-transparent-solid", "hero-cube-transparent-mini", "hero-arrow-uturn-up", "hero-arrow-uturn-up-solid", "hero-arrow-uturn-up-mini", "hero-arrow-long-left", "hero-arrow-long-left-solid", "hero-arrow-long-left-mini", "hero-square-3-stack-3d", "hero-square-3-stack-3d-solid", "hero-square-3-stack-3d-mini", "hero-home", "hero-home-solid", "hero-home-mini", "hero-book-open", "hero-book-open-solid", "hero-book-open-mini", "hero-arrow-down", "hero-arrow-down-solid", "hero-arrow-down-mini", "hero-check-badge", "hero-check-badge-solid", "hero-check-badge-mini", "hero-map-pin", "hero-map-pin-solid", "hero-map-pin-mini", "hero-arrow-up", "hero-arrow-up-solid", "hero-arrow-up-mini", "hero-signal-slash", "hero-signal-slash-solid", "hero-signal-slash-mini", "hero-plus", "hero-plus-solid", "hero-plus-mini", "hero-bookmark", "hero-bookmark-solid", "hero-bookmark-mini", "hero-chevron-right", "hero-chevron-right-solid", "hero-chevron-right-mini", "hero-user", "hero-user-solid", "hero-user-mini", "hero-clipboard", "hero-clipboard-solid", "hero-clipboard-mini", "hero-bolt-slash", "hero-bolt-slash-solid", "hero-bolt-slash-mini", "hero-lock-closed", "hero-lock-closed-solid", "hero-lock-closed-mini", "hero-bolt", "hero-bolt-solid", "hero-bolt-mini", "hero-eye-slash", "hero-eye-slash-solid", "hero-eye-slash-mini", "hero-pause", "hero-pause-solid", "hero-pause-mini", "hero-device-tablet", "hero-device-tablet-solid", "hero-device-tablet-mini", "hero-archive-box-arrow-down", "hero-archive-box-arrow-down-solid", "hero-archive-box-arrow-down-mini", "hero-microphone", "hero-microphone-solid", "hero-microphone-mini", "hero-chat-bubble-bottom-center", "hero-chat-bubble-bottom-center-solid", "hero-chat-bubble-bottom-center-mini", "hero-archive-box", "hero-archive-box-solid", "hero-archive-box-mini", "hero-chevron-double-up", "hero-chevron-double-up-solid", "hero-chevron-double-up-mini", "hero-wrench", "hero-wrench-solid", "hero-wrench-mini", "hero-briefcase", "hero-briefcase-solid", "hero-briefcase-mini", "hero-inbox-stack", "hero-inbox-stack-solid", "hero-inbox-stack-mini", "hero-variable", "hero-variable-solid", "hero-variable-mini", "hero-cloud-arrow-down", "hero-cloud-arrow-down-solid", "hero-cloud-arrow-down-mini", "hero-arrow-right", "hero-arrow-right-solid", "hero-arrow-right-mini", "hero-arrow-down-circle", "hero-arrow-down-circle-solid", "hero-arrow-down-circle-mini", "hero-queue-list", "hero-queue-list-solid", "hero-queue-list-mini", "hero-phone", "hero-phone-solid", "hero-phone-mini", "hero-bell-slash", "hero-bell-slash-solid", "hero-bell-slash-mini", "hero-heart", "hero-heart-solid", "hero-heart-mini", "hero-credit-card", "hero-credit-card-solid", "hero-credit-card-mini", "hero-puzzle-piece", "hero-puzzle-piece-solid", "hero-puzzle-piece-mini", "hero-lock-open", "hero-lock-open-solid", "hero-lock-open-mini", "hero-globe-asia-australia", "hero-globe-asia-australia-solid", "hero-globe-asia-australia-mini", "hero-currency-yen", "hero-currency-yen-solid", "hero-currency-yen-mini", "hero-clipboard-document-check", "hero-clipboard-document-check-solid", "hero-clipboard-document-check-mini", "hero-ellipsis-vertical", "hero-ellipsis-vertical-solid", "hero-ellipsis-vertical-mini", "hero-check", "hero-check-solid", "hero-check-mini", "hero-document-minus", "hero-document-minus-solid", "hero-document-minus-mini", "hero-radio", "hero-radio-solid", "hero-radio-mini", "hero-chevron-up-down", "hero-chevron-up-down-solid", "hero-chevron-up-down-mini", "hero-arrow-uturn-down", "hero-arrow-uturn-down-solid", "hero-arrow-uturn-down-mini", "hero-code-bracket-square", "hero-code-bracket-square-solid", "hero-code-bracket-square-mini", "hero-cpu-chip", "hero-cpu-chip-solid", "hero-cpu-chip-mini", "hero-arrow-small-down", "hero-arrow-small-down-solid", "hero-arrow-small-down-mini", "hero-chart-bar-square", "hero-chart-bar-square-solid", "hero-chart-bar-square-mini", "hero-exclamation-circle", "hero-exclamation-circle-solid", "hero-exclamation-circle-mini", "hero-banknotes", "hero-banknotes-solid", "hero-banknotes-mini", "hero-hashtag", "hero-hashtag-solid", "hero-hashtag-mini", "hero-backspace", "hero-backspace-solid", "hero-backspace-mini", "hero-megaphone", "hero-megaphone-solid", "hero-megaphone-mini", "hero-lifebuoy", "hero-lifebuoy-solid", "hero-lifebuoy-mini", "hero-speaker-wave", "hero-speaker-wave-solid", "hero-speaker-wave-mini", "hero-archive-box-x-mark", "hero-archive-box-x-mark-solid", "hero-archive-box-x-mark-mini", "hero-magnifying-glass-minus", "hero-magnifying-glass-minus-solid", "hero-magnifying-glass-minus-mini", "hero-swatch", "hero-swatch-solid", "hero-swatch-mini", "hero-battery-100", "hero-battery-100-solid", "hero-battery-100-mini", "hero-chevron-left", "hero-chevron-left-solid", "hero-chevron-left-mini", "hero-wallet", "hero-wallet-solid", "hero-wallet-mini", "hero-cog-8-tooth", "hero-cog-8-tooth-solid", "hero-cog-8-tooth-mini", "hero-bars-3-center-left", "hero-bars-3-center-left-solid", "hero-bars-3-center-left-mini", "hero-arrow-down-left", "hero-arrow-down-left-solid", "hero-arrow-down-left-mini", "hero-arrow-left-on-rectangle", "hero-arrow-left-on-rectangle-solid", "hero-arrow-left-on-rectangle-mini", "hero-link", "hero-link-solid", "hero-link-mini", "hero-battery-0", "hero-battery-0-solid", "hero-battery-0-mini", "hero-document-chart-bar", "hero-document-chart-bar-solid", "hero-document-chart-bar-mini", "hero-arrow-trending-down", "hero-arrow-trending-down-solid", "hero-arrow-trending-down-mini", "hero-phone-x-mark", "hero-phone-x-mark-solid", "hero-phone-x-mark-mini", "hero-receipt-percent", "hero-receipt-percent-solid", "hero-receipt-percent-mini", "hero-arrows-right-left", "hero-arrows-right-left-solid", "hero-arrows-right-left-mini", "hero-globe-alt", "hero-globe-alt-solid", "hero-globe-alt-mini", "hero-arrow-up-on-square-stack", "hero-arrow-up-on-square-stack-solid", "hero-arrow-up-on-square-stack-mini", "hero-rectangle-stack", "hero-rectangle-stack-solid", "hero-rectangle-stack-mini", "hero-ellipsis-horizontal-circle", "hero-ellipsis-horizontal-circle-solid", "hero-ellipsis-horizontal-circle-mini", "hero-battery-50", "hero-battery-50-solid", "hero-battery-50-mini", "hero-photo", "hero-photo-solid", "hero-photo-mini", "hero-cog", "hero-cog-solid", "hero-cog-mini", "hero-rss", "hero-rss-solid", "hero-rss-mini", "hero-cloud-arrow-up", "hero-cloud-arrow-up-solid", "hero-cloud-arrow-up-mini", "hero-document-arrow-up", "hero-document-arrow-up-solid", "hero-document-arrow-up-mini", "hero-currency-rupee", "hero-currency-rupee-solid", "hero-currency-rupee-mini", "hero-shield-exclamation", "hero-shield-exclamation-solid", "hero-shield-exclamation-mini", "hero-plus-circle", "hero-plus-circle-solid", "hero-plus-circle-mini", "hero-x-circle", "hero-x-circle-solid", "hero-x-circle-mini", "hero-arrow-up-tray", "hero-arrow-up-tray-solid", "hero-arrow-up-tray-mini", "hero-arrow-right-circle", "hero-arrow-right-circle-solid", "hero-arrow-right-circle-mini", "hero-arrows-pointing-out", "hero-arrows-pointing-out-solid", "hero-arrows-pointing-out-mini", "hero-calendar-days", "hero-calendar-days-solid", "hero-calendar-days-mini", "hero-chevron-double-down", "hero-chevron-double-down-solid", "hero-chevron-double-down-mini", "hero-building-storefront", "hero-building-storefront-solid", "hero-building-storefront-mini", "hero-camera", "hero-camera-solid", "hero-camera-mini", "hero-arrow-long-down", "hero-arrow-long-down-solid", "hero-arrow-long-down-mini", "hero-building-office", "hero-building-office-solid", "hero-building-office-mini", "hero-user-minus", "hero-user-minus-solid", "hero-user-minus-mini", "hero-document-check", "hero-document-check-solid", "hero-document-check-mini", "hero-bell-snooze", "hero-bell-snooze-solid", "hero-bell-snooze-mini", "hero-minus-circle", "hero-minus-circle-solid", "hero-minus-circle-mini", "hero-building-library", "hero-building-library-solid", "hero-building-library-mini", "hero-minus-small", "hero-minus-small-solid", "hero-minus-small-mini", "hero-currency-bangladeshi", "hero-currency-bangladeshi-solid", "hero-currency-bangladeshi-mini", "hero-star", "hero-star-solid", "hero-star-mini", "hero-arrow-trending-up", "hero-arrow-trending-up-solid", "hero-arrow-trending-up-mini", "hero-users", "hero-users-solid", "hero-users-mini", "hero-cursor-arrow-rays", "hero-cursor-arrow-rays-solid", "hero-cursor-arrow-rays-mini", "hero-chart-bar", "hero-chart-bar-solid", "hero-chart-bar-mini", "hero-academic-cap", "hero-academic-cap-solid", "hero-academic-cap-mini", "hero-plus-small", "hero-plus-small-solid", "hero-plus-small-mini", "hero-computer-desktop", "hero-computer-desktop-solid", "hero-computer-desktop-mini", "hero-signal", "hero-signal-solid", "hero-signal-mini", "hero-question-mark-circle", "hero-question-mark-circle-solid", "hero-question-mark-circle-mini", "hero-arrow-down-on-square", "hero-arrow-down-on-square-solid", "hero-arrow-down-on-square-mini", "hero-chat-bubble-oval-left", "hero-chat-bubble-oval-left-solid", "hero-chat-bubble-oval-left-mini", "hero-stop", "hero-stop-solid", "hero-stop-mini", "hero-user-plus", "hero-user-plus-solid", "hero-user-plus-mini", "hero-funnel", "hero-funnel-solid", "hero-funnel-mini", "hero-arrow-up-left", "hero-arrow-up-left-solid", "hero-arrow-up-left-mini", "hero-phone-arrow-down-left", "hero-phone-arrow-down-left-solid", "hero-phone-arrow-down-left-mini", "hero-wifi", "hero-wifi-solid", "hero-wifi-mini", "hero-document-plus", "hero-document-plus-solid", "hero-document-plus-mini", "hero-truck", "hero-truck-solid", "hero-truck-mini", "hero-power", "hero-power-solid", "hero-power-mini", "hero-folder", "hero-folder-solid", "hero-folder-mini", "hero-bars-2", "hero-bars-2-solid", "hero-bars-2-mini", "hero-gift", "hero-gift-solid", "hero-gift-mini", "hero-arrow-up-right", "hero-arrow-up-right-solid", "hero-arrow-up-right-mini", "hero-shopping-bag", "hero-shopping-bag-solid", "hero-shopping-bag-mini", "hero-check-circle", "hero-check-circle-solid", "hero-check-circle-mini", "hero-video-camera-slash", "hero-video-camera-slash-solid", "hero-video-camera-slash-mini", "hero-command-line", "hero-command-line-solid", "hero-command-line-mini", "hero-newspaper", "hero-newspaper-solid", "hero-newspaper-mini", "hero-key", "hero-key-solid", "hero-key-mini", "hero-server", "hero-server-solid", "hero-server-mini", "hero-envelope", "hero-envelope-solid", "hero-envelope-mini", "hero-phone-arrow-up-right", "hero-phone-arrow-up-right-solid", "hero-phone-arrow-up-right-mini", "hero-hand-thumb-down", "hero-hand-thumb-down-solid", "hero-hand-thumb-down-mini", "hero-play-circle", "hero-play-circle-solid", "hero-play-circle-mini", "hero-envelope-open", "hero-envelope-open-solid", "hero-envelope-open-mini", "hero-bookmark-slash", "hero-bookmark-slash-solid", "hero-bookmark-slash-mini", "hero-scissors", "hero-scissors-solid", "hero-scissors-mini", "hero-chat-bubble-left-right", "hero-chat-bubble-left-right-solid", "hero-chat-bubble-left-right-mini", "hero-arrow-path", "hero-arrow-path-solid", "hero-arrow-path-mini", "hero-document-arrow-down", "hero-document-arrow-down-solid", "hero-document-arrow-down-mini", "hero-arrow-path-rounded-square", "hero-arrow-path-rounded-square-solid", "hero-arrow-path-rounded-square-mini", "hero-ellipsis-horizontal", "hero-ellipsis-horizontal-solid", "hero-ellipsis-horizontal-mini", "hero-pencil", "hero-pencil-solid", "hero-pencil-mini", "hero-cursor-arrow-ripple", "hero-cursor-arrow-ripple-solid", "hero-cursor-arrow-ripple-mini", "hero-information-circle", "hero-information-circle-solid", "hero-information-circle-mini", "hero-currency-euro", "hero-currency-euro-solid", "hero-currency-euro-mini", "hero-chevron-up", "hero-chevron-up-solid", "hero-chevron-up-mini", "hero-hand-raised", "hero-hand-raised-solid", "hero-hand-raised-mini", "hero-user-group", "hero-user-group-solid", "hero-user-group-mini", "hero-light-bulb", "hero-light-bulb-solid", "hero-light-bulb-mini", "hero-clock", "hero-clock-solid", "hero-clock-mini", "hero-arrow-small-right", "hero-arrow-small-right-solid", "hero-arrow-small-right-mini", "hero-arrow-long-up", "hero-arrow-long-up-solid", "hero-arrow-long-up-mini", "hero-pencil-square", "hero-pencil-square-solid", "hero-pencil-square-mini", "hero-no-symbol", "hero-no-symbol-solid", "hero-no-symbol-mini", "hero-arrow-top-right-on-square", "hero-arrow-top-right-on-square-solid", "hero-arrow-top-right-on-square-mini", "hero-presentation-chart-line", "hero-presentation-chart-line-solid", "hero-presentation-chart-line-mini", "hero-document", "hero-document-solid", "hero-document-mini", "hero-folder-arrow-down", "hero-folder-arrow-down-solid", "hero-folder-arrow-down-mini", "hero-bell-alert", "hero-bell-alert-solid", "hero-bell-alert-mini", "hero-server-stack", "hero-server-stack-solid", "hero-server-stack-mini", "hero-stop-circle", "hero-stop-circle-solid", "hero-stop-circle-mini", "hero-eye", "hero-eye-solid", "hero-eye-mini", "hero-building-office-2", "hero-building-office-2-solid", "hero-building-office-2-mini", "hero-arrow-small-left", "hero-arrow-small-left-solid", "hero-arrow-small-left-mini", "hero-paper-airplane", "hero-paper-airplane-solid", "hero-paper-airplane-mini", "hero-code-bracket", "hero-code-bracket-solid", "hero-code-bracket-mini", "hero-bars-4", "hero-bars-4-solid", "hero-bars-4-mini", "hero-eye-dropper", "hero-eye-dropper-solid", "hero-eye-dropper-mini", "hero-chevron-double-left", "hero-chevron-double-left-solid", "hero-chevron-double-left-mini", "hero-document-magnifying-glass", "hero-document-magnifying-glass-solid", "hero-document-magnifying-glass-mini", "hero-chart-pie", "hero-chart-pie-solid", "hero-chart-pie-mini", "hero-document-text", "hero-document-text-solid", "hero-document-text-mini", "hero-printer", "hero-printer-solid", "hero-printer-mini", "hero-arrow-left", "hero-arrow-left-solid", "hero-arrow-left-mini", "hero-trash", "hero-trash-solid", "hero-trash-mini", "hero-folder-plus", "hero-folder-plus-solid", "hero-folder-plus-mini", "hero-cloud", "hero-cloud-solid", "hero-cloud-mini", "hero-cake", "hero-cake-solid", "hero-cake-mini", "hero-sun", "hero-sun-solid", "hero-sun-mini", "hero-magnifying-glass-plus", "hero-magnifying-glass-plus-solid", "hero-magnifying-glass-plus-mini", "hero-map", "hero-map-solid", "hero-map-mini", "hero-magnifying-glass", "hero-magnifying-glass-solid", "hero-magnifying-glass-mini", "hero-gif", "hero-gif-solid", "hero-gif-mini", "hero-pause-circle", "hero-pause-circle-solid", "hero-pause-circle-mini", "hero-cog-6-tooth", "hero-cog-6-tooth-solid", "hero-cog-6-tooth-mini", "hero-currency-dollar", "hero-currency-dollar-solid", "hero-currency-dollar-mini", "hero-calendar", "hero-calendar-solid", "hero-calendar-mini", "hero-receipt-refund", "hero-receipt-refund-solid", "hero-receipt-refund-mini", "hero-arrows-up-down", "hero-arrows-up-down-solid", "hero-arrows-up-down-mini", "hero-face-smile", "hero-face-smile-solid", "hero-face-smile-mini", "hero-arrow-up-circle", "hero-arrow-up-circle-solid", "hero-arrow-up-circle-mini", "hero-face-frown", "hero-face-frown-solid", "hero-face-frown-mini", "hero-tag", "hero-tag-solid", "hero-tag-mini", "hero-finger-print", "hero-finger-print-solid", "hero-finger-print-mini", "hero-musical-note", "hero-musical-note-solid", "hero-musical-note-mini", "hero-user-circle", "hero-user-circle-solid", "hero-user-circle-mini", "hero-circle-stack", "hero-circle-stack-solid", "hero-circle-stack-mini", "hero-viewfinder-circle", "hero-viewfinder-circle-solid", "hero-viewfinder-circle-mini", "hero-flag", "hero-flag-solid", "hero-flag-mini", "hero-shield-check", "hero-shield-check-solid", "hero-shield-check-mini", "hero-backward", "hero-backward-solid", "hero-backward-mini", "hero-arrow-right-on-rectangle", "hero-arrow-right-on-rectangle-solid", "hero-arrow-right-on-rectangle-mini", "hero-arrows-pointing-in", "hero-arrows-pointing-in-solid", "hero-arrows-pointing-in-mini", "hero-chat-bubble-left", "hero-chat-bubble-left-solid", "hero-chat-bubble-left-mini", "hero-play-pause", "hero-play-pause-solid", "hero-play-pause-mini", "hero-paper-clip", "hero-paper-clip-solid", or "hero-paper-clip-mini". Global attributes are accepted.

Renders an input with label and error messages.

A %Phoenix.HTML.Form{} and field name may be passed to the input to build input names and error messages, or all the attributes and errors may be passed explicitly.

examples

Examples

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

attributes

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).
• class (:any) - Class of the field container element (overridable, :tails_classes, required).
• input_class (:any) - Class of the input element (overridable, :tails_classes, required).
• input_check_label_class (:any) - Class of the label element for a check input (overridable, :tails_classes, required).
• description_class (:any) - Class of the field description (overridable, :tails_classes, required). Global attributes are accepted.

slots

Slots

• inner_block

Renders a label.

attributes

Attributes

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

slots

Slots

• inner_block (required)

Renders a description list.

examples

Examples

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

attributes

Attributes

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

slots

Slots

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

TODO: This component is not fully converted to use overrides/properly styled. Renders a modal.

examples

Examples

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

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>

attributes

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, :tails_classes, required).

slots

Slots

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

Renders a simple form.

examples

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>

attributes

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• as (:any) - The server side parameter to collect all input under. Defaults to nil.
• for (:any) (required) - The datastructure for the form.
• class (:any) - (overridable, :tails_classes, required).
• actions_class (:any) - (overridable, :tails_classes, required). Global attributes are accepted.

slots

Slots

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

Renders a simple table with generic styling.

examples

Examples

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

attributes

Attributes

• overrides (:list) - Manually set the overrides for this component (instead of config/default). Defaults to nil.
• id (:string)
• row_click (:any) - Defaults to nil.
• row_id (:any) - The function for generating the row id (will automatically extract from a LiveStream). 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) - Supports a list or LiveStream.
• class (:any) - (overridable, :tails_classes, required).
• action_class (:any) - (overridable, :tails_classes, required).
• action_td_class (:any) - (overridable, :tails_classes, required).
• action_wrapper_class (:any) - (overridable, :tails_classes, required).
• tbody_class (:any) - (overridable, :tails_classes, required).
• td_class (:any) - (overridable, :tails_classes, required).
• th_action_class (:any) - (overridable, :tails_classes, required).
• th_label_class (:any) - (overridable, :tails_classes, required).
• thead_class (:any) - (overridable, :tails_classes, required).
• tr_class (:any) - (overridable, :tails_classes, required).

slots

Slots

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