All components
Link
Inline anchors with underline and plain hover treatments and a themed focus ring.
1234567891011121314151617import { Link } from "#components/ui/base-ui/link.tsx";
export function Example() { return ( <> {/* the variant prop resolves through the StyleX recipe and is exposed as a data-variant attribute */} <Link href="/docs" variant="underline">Read the docs</Link>
{/* composition: the render prop replaces the underlying element, e.g. a router's link component */} <Link variant="plain" render={<RouterLink to="/pricing" />}> Pricing </Link> </> );}Variants
Read the docsunderline
Read the docsplain
Install
1npx stylexblocks add linkSource
components/ui/base-ui/link.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/base-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const linkStyles = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', outline: 'none', gap: spacing._1_5, cursor: 'pointer', borderRadius: semanticRadii.control, outlineWidth: { default: null, ':focus': '1px', }, outlineOffset: { default: null, ':focus': '2px', }, outlineStyle: { default: null, ':focus': 'solid', }, outlineColor: { default: null, ':focus': colorPalette.focusRing, }, },})
const linkVariants = stylex.create({ underline: { color: colorPalette.fg, textDecoration: 'underline', textUnderlineOffset: '3px', textDecorationColor: 'currentColor/20', }, plain: { color: colorPalette.fg, textDecoration: { default: null, ':hover': 'underline', }, textUnderlineOffset: { default: null, ':hover': '3px', }, textDecorationColor: { default: null, ':hover': 'currentColor/20', }, },})
export type LinkVariant = keyof typeof linkVariants
/** * Link — recipe and component colocated in one file. The variant prop * resolves mechanically from the axis map. Composition via `render`. */const linkRecipe = defineRecipe({ styles: linkStyles, axes: { variant: linkVariants }, defaultVariants: { variant: "plain" },});
export const Link = createComponent("a", linkRecipe, "Link");
export type LinkProps = React.ComponentProps<typeof Link>;