Mishka
Chelekom

Close Button

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleApache-2.0
Installation mix mishka.ui.gen.headless close_button
Source View Source

Overview of the Phoenix and LiveView Headless Close Button Component

The Mishka Chelekom Headless Close Button is an icon-only button for dismissing dialogs, drawers, alerts, chips and toasts in a Phoenix LiveView app. It renders a native button with type="button" and an aria-label (default "Close"), because it has no visible text.

With no content, the button draws a built-in ✕ inside a span with data-part="icon". Put your own icon in the default slot and the built-in one is not rendered. disabled sets the native attribute and data-disabled. The component ships no colors, sizes or spacing, and it closes nothing by itself: you attach the click.

Base UI Close Button example - built-in and custom icon (Phoenix headless)

Base UI Close Button example - built-in and custom icon (Phoenix headless)

heex
<div class="flex items-center gap-4">
  <.close_button
    id="baseui-close-button-hero"
    label="Close"
    class="inline-flex size-8 items-center justify-center rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
  />
  <.close_button
    id="baseui-close-button-custom"
    label="Remove"
    class="inline-flex size-8 items-center justify-center rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      aria-hidden="true"
      class="size-4"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
    </svg>
  </.close_button>
</div>

Wiring the click

The button has no handler of its own. Add one through the global attributes: a phx-click event for the LiveView, or a Phoenix.LiveView.JS command that hides the element in the browser.

heex
<.close_button label="Close dialog" phx-click="close_dialog" />

<.close_button label="Dismiss alert" phx-click={JS.hide(to: "#saved-alert")} />

Attributes and parts

label is the aria-label and defaults to "Close". disabled sets the native attribute and data-disabled. class styles the button, with the base class chelekom-close-button. icon_class styles the built-in ✕ only, because that span is not rendered once you pass your own icon. id is optional, and other global attributes such as phx-click are passed to the button.

Accessibility

The close button follows the WAI-ARIA Button pattern. Enter and Space activate it. The built-in ✕ is hidden from assistive technology with aria-hidden="true", so the label is the only name announced. Hide your own icon the same way when it is decorative.