Skip to content

Fix: make button shortcode fully clickable #22811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 16, 2025
Merged

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!

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