# `PhiaUi.Components.Typography.Leader`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/typography/leader.ex#L1)

Dot/dash leader fill between two inline elements.

Leaders are the horizontal fill characters (typically dots) that connect
a label on the left to a value on the right — commonly seen in restaurant
menus, tables of contents, and pricing lists.

## Examples

    <.leader>
      <:leading>Chapter 1</:leading>
      <:trailing>1</:trailing>
    </.leader>

    <.leader fill={:dash}>
      <:leading>Espresso</:leading>
      <:trailing>$3.50</:trailing>
    </.leader>

## Fill styles

| Fill     | Border style                     |
|----------|----------------------------------|
| `:dot`   | `border-dotted` (default)        |
| `:dash`  | `border-dashed`                  |
| `:line`  | `border-solid`                   |
| `:space` | `border-transparent` (invisible) |

# `leader`

Renders a leader fill between leading and trailing content.
## Attributes

* `fill` (`:atom`) - Leader fill style. Defaults to `:dot`. Must be one of `:dot`, `:dash`, `:line`, or `:space`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.
## Slots

* `leading` (required) - Left-side content (label, chapter title).
* `trailing` (required) - Right-side content (price, page number).

---

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