Editable · Style
Semantic colors, density, corner radius, and width via modifier classes on the editable root.
Hex doc
Phoenix
Color
Default
Accent
Brand
Alert
Info
Success
<.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 editable--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 editable--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 editable--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 editable--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 editable--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>
Size
SM
MD
LG
XL
<.editable class="editable editable--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 editable--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 editable--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 editable--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>
Radius
None
SM
MD
LG
XL
Full
<.editable class="editable editable--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 editable--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 editable--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 editable--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 editable--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 editable--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
2xs
MD
XL
2XL
<.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-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-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>