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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Sujan-6905
Copy link

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.

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
1 participant