Skip to content

Conversation

@Sujan-6905
Copy link
Contributor

Description

This PR addresses the issue described in #22806, which I originally opened to highlight a UX inconsistency with the {{< button >}} shortcode. The current implementation renders a <div> wrapping an <a> element, causing only the text inside the anchor to be clickable. This creates a misleading user experience, as the rest of the styled "button" area is non-interactive.

Fix: Updated the layouts/shortcodes/button.html to render the <a> element directly with the required button classes (button not-prose), ensuring the full visual button area is clickable and behaves as expected.

Related issues or tickets

Closes #22806

Reviews

  • Technical review
  • Editorial review
  • Product review

Happy to iterate if there are style or implementation preferences. Thanks for your time reviewing this!

@netlify
Copy link

netlify bot commented Jun 9, 2025

Deploy Preview for docsdocker ready!

Name Link
🔨 Latest commit ca6765e
🔍 Latest deploy log https://app.netlify.com/projects/docsdocker/deploys/6848491f1bdc58000852fa0a
😎 Deploy Preview https://deploy-preview-22811--docsdocker.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Member

@thaJeztah thaJeztah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@thaJeztah
Copy link
Member

@crazy-max ptal 🤗

@crazy-max crazy-max merged commit 46349c4 into docker:main Jun 16, 2025
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

hugo Updates related to hugo

Projects

None yet

Development

Successfully merging this pull request may close these issues.

button shortcode renders non-clickable padding due to div wrapping anchor element

3 participants