Hex doc
Phoenix
Preview
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
<.dialog class="dialog" modal>
<:trigger>Preview</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Semantic
Use class="ui-{role}" to set the semantic palette of a dialog.
Available options: accent, alert, brand, info, success
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
<.dialog class="dialog" modal>
<:trigger>Open default</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-accent" modal>
<:trigger>Open accent</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-brand" modal>
<:trigger>Open brand</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-alert" modal>
<:trigger>Open alert</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-info" modal>
<:trigger>Open info</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-success" modal>
<:trigger>Open success</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Variant
Variant modifiers control dialog surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add
ui-solid
for a filled surface.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
<.dialog class="dialog" modal>
<:trigger>Subtle (default)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-solid" modal>
<:trigger>Solid</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-ghost" modal>
<:trigger>Ghost</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Semantic × variant
Combine semantic palette and variant treatment on the same host, for example dialog ui-accent ui-solid.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
<.dialog class="dialog" modal>
<:trigger>Base</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-solid" modal>
<:trigger>Base</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-ghost" modal>
<:trigger>Base</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-accent" modal>
<:trigger>Accent</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-accent ui-solid" modal>
<:trigger>Accent</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-accent ui-ghost" modal>
<:trigger>Accent</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-alert" modal>
<:trigger>Alert</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-alert ui-solid" modal>
<:trigger>Alert</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-alert ui-ghost" modal>
<:trigger>Alert</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-brand" modal>
<:trigger>Brand</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-brand ui-solid" modal>
<:trigger>Brand</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-brand ui-ghost" modal>
<:trigger>Brand</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-info" modal>
<:trigger>Info</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-info ui-solid" modal>
<:trigger>Info</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-info ui-ghost" modal>
<:trigger>Info</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-success" modal>
<:trigger>Success</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-success ui-solid" modal>
<:trigger>Success</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-success ui-ghost" modal>
<:trigger>Success</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Size
Use class="ui-size-{size}" to set the size of a dialog.
Available options: xs, sm, md (default), lg, xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
<.dialog class="dialog ui-size-sm" modal>
<:trigger>Open (sm)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-size-md" modal>
<:trigger>Open (md)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-size-lg" modal>
<:trigger>Open (lg)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-size-xl" modal>
<:trigger>Open (xl)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a dialog.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents.
<.dialog class="dialog ui-rounded-none" modal>
<:trigger>Open (rounded-none)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-rounded-sm" modal>
<:trigger>Open (rounded-sm)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-rounded-md" modal>
<:trigger>Open (rounded-md)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-rounded-lg" modal>
<:trigger>Open (rounded-lg)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-rounded-xl" modal>
<:trigger>Open (rounded-xl)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-rounded-full" modal>
<:trigger>Open (rounded-full)</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Side
Filters
Narrow results by category, date, or status.
Applied filters update the list immediately. Clear all to reset.
<.dialog class="dialog dialog--side" modal>
<:trigger>Open</:trigger>
<:title>Filters</:title>
<:description>Narrow results by category, date, or status.</:description>
<:content>
<p>Applied filters update the list immediately. Clear all to reset.</p>
</:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
Max height
Use class="max-h-{step}" to set the maximum height of a dialog root.
Available options: none, full, screen, dvh, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (dialog)
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
9xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
8xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
7xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
6xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
5xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
4xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
3xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
2xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
xs
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
sm
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
md
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
lg
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
2xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
3xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
4xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
5xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
6xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
7xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
8xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
9xl
Update profile
Change how your name appears across the app.
Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.
<.dialog class="dialog" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-9xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-8xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-7xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-6xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-5xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-4xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-3xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-2xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-xs" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-sm" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-md" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-lg" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-2xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-3xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-4xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-5xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-6xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-7xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-8xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog ui-max-height-9xl" modal>
<:trigger>Open</:trigger>
<:title>Update profile</:title>
<:description>Change how your name appears across the app.</:description>
<:content><p>Your display name is shown on comments, mentions, and shared documents. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
<:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>