# `PhiaUi.Components.Marker`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/display/marker.ex#L1)

Point-of-interest indicator positioned absolutely on images or maps.

Markers are placed inside a `relative` container and positioned via
`:x` and `:y` percentage or pixel values. They support variants, sizes,
pulse animation, optional icons, and a popover slot for details on
hover/click.

## Examples

    <div class="relative">
      <img src="/images/floor-plan.png" alt="Floor plan" />
      <.marker x="25%" y="40%" label="Conference Room A" variant={:primary} />
      <.marker x="60%" y="70%" label="Kitchen" pulse={true} />
    </div>

## With popover

    <.marker x="50%" y="50%" variant={:primary}>
      <:popover>
        <p class="text-sm">Meeting at 3 PM</p>
      </:popover>
    </.marker>

## With icon

    <.marker x="30%" y="60%" icon="map-pin" variant={:destructive} size={:lg} />

# `marker`

Renders an absolutely-positioned marker indicator.
## Attributes

* `x` (`:any`) (required) - Horizontal position (e.g. "50%", "120px").
* `y` (`:any`) (required) - Vertical position (e.g. "50%", "120px").
* `label` (`:string`) - Accessible label / tooltip text. Defaults to `nil`.
* `variant` (`:atom`) - Color variant. Defaults to `:default`. Must be one of `:default`, `:primary`, `:destructive`, `:success`, or `:warning`.
* `size` (`:atom`) - Marker size. Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `pulse` (`:boolean`) - Show ping animation. Defaults to `false`.
* `icon` (`:string`) - Optional icon name (Lucide). Defaults to `nil`.
* `on_click` (`:string`) - phx-click event name. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` - Custom content inside the marker.
* `popover` - Content shown on hover/click.

---

*Consult [api-reference.md](api-reference.md) for complete listing*