Editable

Style

Semantic colors, visual variants, density, corner radius, and width on the editable root.

Hex doc

Phoenix

Preview

Label

Subtle (default)

    <.editable class="editable w-3xs" value="Subtle (default)">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

Semantic

Use class="ui-{role}" to set the semantic palette of an editable.

Available options: accent, alert, brand, info, success

Label

Default

Label

Accent

Label

Brand

Label

Alert

Label

Info

Label

Success

    <.editable class="editable w-3xs" value="Default">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-accent" value="Accent">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-brand" value="Brand">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-alert" value="Alert">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-info" value="Info">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-success" value="Success">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

Variant

Variant modifiers control editable surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

Label

Subtle (default)

Label

Solid

Label

Ghost

    <.editable class="editable w-3xs" value="Subtle (default)">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-solid" value="Solid">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-ghost" value="Ghost">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example editable ui-accent ui-solid.

Label

Base

Label

Base

Label

Base

Label

Accent

Label

Accent

Label

Accent

Label

Alert

Label

Alert

Label

Alert

Label

Brand

Label

Brand

Label

Brand

Label

Info

Label

Info

Label

Info

Label

Success

Label

Success

Label

Success

    <.editable class="editable w-3xs" value="Base">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-solid w-3xs" value="Base">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-ghost w-3xs" value="Base">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-accent w-3xs" value="Accent">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-accent ui-solid w-3xs" value="Accent">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-accent ui-ghost w-3xs" value="Accent">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-alert w-3xs" value="Alert">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-alert ui-solid w-3xs" value="Alert">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-alert ui-ghost w-3xs" value="Alert">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-brand w-3xs" value="Brand">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-brand ui-solid w-3xs" value="Brand">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-brand ui-ghost w-3xs" value="Brand">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-info w-3xs" value="Info">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-info ui-solid w-3xs" value="Info">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-info ui-ghost w-3xs" value="Info">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-success w-3xs" value="Success">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-success ui-solid w-3xs" value="Success">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable ui-success ui-ghost w-3xs" value="Success">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

Size

Use class="ui-size-{size}" to set the size of an editable.

Available options: xs, sm, md (default), lg, xl

Label

    <.editable class="editable w-3xs ui-size-sm" value="SM">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-size-md" value="MD">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-size-lg" value="LG">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-size-xl" value="XL">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of an editable.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

Label

None

Label

Full

    <.editable class="editable w-3xs ui-rounded-none" value="None">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-rounded-sm" value="SM">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-rounded-md" value="MD">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-rounded-lg" value="LG">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-rounded-xl" value="XL">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>
<.editable class="editable w-3xs ui-rounded-full" value="Full">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

Max width

Without max-w-*, width comes from component CSS. Default for editable: 3xs (width: 100%).

Use class="max-w-{step}" to set the maximum width of an editable root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs (default), 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (3xs)

Label

default (3xs)

none

Label

none

full

Label

full

9xs

Label

9xs

8xs

Label

8xs

7xs

Label

7xs

6xs

Label

6xs

5xs

Label

5xs

4xs

Label

4xs

3xs

Label

3xs

2xs

Label

2xs

Label

2xl

Label

2xl

3xl

Label

3xl

4xl

Label

4xl

5xl

Label

5xl

6xl

Label

6xl

7xl

Label

7xl

8xl

Label

8xl

9xl

Label

9xl

    <.editable class="editable" value="default">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-none" value="none">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-full" value="full">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-9xs" value="9xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-8xs" value="8xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-7xs" value="7xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-6xs" value="6xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-5xs" value="5xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-4xs" value="4xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-3xs" value="3xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-2xs" value="2xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-xs" value="xs">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-sm" value="sm">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-md" value="md">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-lg" value="lg">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-xl" value="xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-2xl" value="2xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-3xl" value="3xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-4xl" value="4xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-5xl" value="5xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-6xl" value="6xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-7xl" value="7xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-8xl" value="8xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>

<.editable class="editable max-w-9xl" value="9xl">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>

</.editable>