You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using the Web Interface, allow middle click to open the original link which should open the link on the background on a new tab.
To do this, my recommendation is to change the component to another one (ie ) that uses a element inside since those elements are prepared for link manipulation by the browser defaults.
In order to do this a new component could be used. This component would live in packages/web/components/elements/ButtonLink.tsx and would look something like this:
import{styled,theme}from'../tokens/stitches.config'exportconstButtonLink=styled('a',{fontFamily: 'inter',fontSize: '$2',lineHeight: '1.25',color: '$grayText',textDecoration: 'none',// Ensures it doesn't look like a traditional linkvariants: {style: {ctaYellow: {borderRadius: '$3',px: '$3',py: '$2',border: '1px solid $yellow3',bg: '$yellow3','&:hover': {bg: '$yellow4',border: '1px solid $grayBorderHover',},},// All other styles remain the same as the ones for <Button>, copying directly from your original button styles// ctaOmnivoreYellow, ctaBlue, etc.},},defaultVariants: {style: 'ctaWhite',},});
<ButtonLinktitle="Open original (o)"style="hoverActionIcon"href="https://example.com"// replace with actual URLtarget="_blank"rel="noopener noreferrer">
Open Original
</ButtonLink>
The text was updated successfully, but these errors were encountered:
When using the Web Interface, allow middle click to open the original link which should open the link on the background on a new tab.
To do this, my recommendation is to change the component to another one (ie ) that uses a element inside since those elements are prepared for link manipulation by the browser defaults.
In order to do this a new component could be used. This component would live in
packages/web/components/elements/ButtonLink.tsx
and would look something like this:and could be used here like this:
The text was updated successfully, but these errors were encountered: