Best practice for disabling a links/buttons within components

I have a component that is in essence simply a wrapper for a styled text link. I’d like to provide the option disable that link, so that it can be visually shown but remain inert.

What would be a clean way to achieve a disabled state for a component based on a property?

What I tried so far was to map a “Disabled“ property to an attribute, but it does not appear to be an option to map the toggle property type to an attribute. I tried to use a select type instead, but that always adds the attribute to the element even if the property has no value, which would be causing it to remain in a disabled state.

(Note: I don’t want to fake it with CSS. The link needs to be properly disabled with an inert attribute, at the very least)

Why don’t do use # for the href (the lkink will then do nothing) and add some css class to gray out the text link visually

A link with # as the href is still a valid link and included in the focus order. :confused:

The “correct” way, in terms of accessibility, to do what you are suggesting is not to have a default value for the component’s property that provides the link’s href, so that Bricks doesn’t add an href attribute to the Text Link at all, which would make it simply an inert text element.

But we have cases where we use the component as part of query loops, where we always provide an href value and want a second property/flag to indicate that the href might be a valid page, but the link is still disabled because the user is not logged in for example.