Add external icon option to UButton and ULink
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Description
Using <UNavigationMenu> it adds an external icon when prop to is an external link:
Unfortunately, UButton and ULink doesnt have this feature. Even with the prop trailingIcon the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:
<UButton :to="externalUrl" target="_blank">
<span
>To external provider<Icon
name="i-material-symbols:arrow-outward-rounded"
class="size-3 align-top opacity-70"
/></span>
</UButton>
It would be great if a button would either automatically add the icon, like <UNavigationMenu> does, or would have a prop externalIcon that can be set to true.
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the UButton and ULink entry points with the existing external-link behavior in UNavigationMenu. Determine how the requested automatic or configurable icon should apply to external links, then verify that the resulting appearance and behavior match the example; the issue does not name specific files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100