Dialog · Style

    <.dialog class="dialog dialog--sm" modal>
  <:trigger>Open (sm)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--md" modal>
  <:trigger>Open (md)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--lg" modal>
  <:trigger>Open (lg)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--xl" modal>
  <:trigger>Open (xl)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>

  

    <.dialog class="dialog dialog--text-sm" modal>
  <:trigger>Open (text-sm)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--text-xl" modal>
  <:trigger>Open (text-xl)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--text-2xl" modal>
  <:trigger>Open (text-2xl)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--text-4xl" modal>
  <:trigger>Open (text-4xl)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>

  

    <.dialog class="dialog dialog--rounded-none" modal>
  <:trigger>Open (rounded-none)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--rounded-sm" modal>
  <:trigger>Open (rounded-sm)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--rounded-md" modal>
  <:trigger>Open (rounded-md)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--rounded-lg" modal>
  <:trigger>Open (rounded-lg)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--rounded-xl" modal>
  <:trigger>Open (rounded-xl)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>
<.dialog class="dialog dialog--rounded-full" modal>
  <:trigger>Open (rounded-full)</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>

  

    <.dialog class="dialog dialog--side" modal>
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content class="p-4"><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></:content>
  <:close_trigger><.heroicon name="hero-x-mark" class="icon" /></:close_trigger>
</.dialog>