Button Core Component - Adding custom HTML attributes and HTML Tags via Sling Delegation Pattern

[abhishektiwari]

I am trying to use Button Core Component. As per our project requirements we need to add some custom attributes to anchor tags and to add some html tags(span tag) with minimal code changes.

I was trying to leverage the "data-sly-attribute="${button.buttonLink.htmlAttributes}" line in v2 Button but this doesn't work as finally in the LinkImpl it filters the attributes with the values in below set.

private static final Set<String> ALLOWED_ATTRIBUTES = new HashSet<String>() {{
add(ATTR_TARGET);
add(ATTR_ARIA_LABEL);
add(ATTR_TITLE);
}};

Is there a way I can achieve this without having to overlay the Button HTML. Also I need to have a global solutions as this would be used for all links in core components.

[BrianKasingli · Accepted solution]

Id suggest keeping the custom implementation code closer to your own sling model. So try not extend the core component Button code, but to expose something like getButtonAllowedAttributes(), which in your Sightly code, you can just call ${model.buttonAllowedAttributes}. Keeping it simple.