Enhancement Request: Ability for dnn-button to Generate a Link Instead

Open
#819 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
html, typescript
Domain
frontend

Research direction

Start at the dnn-button component entry point and inspect how it currently renders its button markup and handles attributes. Verify the requested href example and the existing button example render with matching styling, including the link's href, target, and role="button" output.

Written by the indexing model from the issue text.

Description

There are usability situations where a button should look like a button but actually be a link (HTML A tag).

I was thinking that it could be a simple switch, IF there is an href attribute, then emit an instead of .

Example

<dnn-button id="linkToAccordion" href="/tabid/58" target="_blank" class="btn btn-outline-dark rounded-0 text-nowrap mb-1 mr-1">Go to the Accordion page</dnn-button>

Would result in:

<a class="btn btn-outline-dark rounded-0 text-nowrap mb-1 mr-1" href="/tabid/58" target="_blank" role="button">Go to the Accordion page</a>

But the important thing is that the result look identical to the similarly crafted button:

<dnn-button id="buttonOptions" class="btn btn-dark rounded-0 text-nowrap mb-1 mr-1">Options</dnn-button>

Here is an example where the Link is outline and the Button is not and otherwise they follow the same style and can be used together in a UI.
image

Dominant language
TypeScript
Stars
19
Forks
9
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DNNCommunity/dnn-elements

All issues in DNNCommunity/dnn-elements

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.