Action button placement in `Description Lists`

[seb-jean]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/data-display/description-lists#component-7a07446d5ac240767202f521f7065893
• Component name: Left-aligned with inline actions

Describe the bug With a width of less than 640px, we currently have the action button to the right of the text. I think this is a shame.

I think it would be better to place it to the right of the <dt>. It allows the text to take up more space.

What do you think?

[RobinMalfait]

Hey, thanks so much for this suggestion! 🙏

Yep I agree that this is a bit odd looking, and it's a bit of a trade-off we chose to make things consistent such that the update action is always in the same location regardless of the field. But as you mentioned, this can look a bit odd for this about section.

One thing you can do is make an exception for this one specific field and display it next to the About heading instead of next to the value.

You can use the following snippet to achieve this behaviour:

<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
  <dt class="flex justify-between text-sm font-medium leading-6 text-gray-900">
    About
    <button type="button" class="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500 sm:hidden">Update</button>
  </dt>
  <dd class="mt-1 flex text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
    <span class="flex-grow">Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</span>
    <span class="ml-4 hidden flex-shrink-0 sm:block">
      <button type="button" class="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500">Update</button>
    </span>
  </dd>
</div>

Comparing this to the original code looks like this:

  <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-   <dt class="text-sm font-medium leading-6 text-gray-900">
+   <dt class="flex justify-between text-sm font-medium leading-6 text-gray-900">
      About
+     <button type="button" class="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500 sm:hidden">Update</button>
    </dt>
    <dd class="mt-1 flex text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
      <span class="flex-grow">Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</span>
-     <span class="ml-4 flex-shrink-0">
+     <span class="ml-4 hidden flex-shrink-0 sm:block">
        <button type="button" class="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500">Update</button>
      </span>
    </dd>
  </div>

To break things down:

• I've added flex justify-between to the dt element.
• I've added <button type="button" class="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500 sm:hidden">Update</button> next to the About text
  • This button is a copy paste of the button we already used.
  • This also has the additional sm:hidden class to hide it for larger screens
• I've added hidden sm:block to the wrapping span of the second button.

Note that the button is currently in 2 spots, so if you want to attach an action or update its text you have to update both locations.

Hope this helps!

[seb-jean]

Thanks @RobinMalfait!