Link Style Recipe (recipes/link.ts)

chakra-ui · ui, UI / Frontend, link, style, recipe, panda

Panda preset recipe defining accessible link styles with underline and plain variants.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
import { defineRecipe } from "../def"

export const linkRecipe = defineRecipe({
  className: "link",
  base: {
    display: "inline-flex",
    alignItems: "center",
    outline: "none",
    gap: "1.5",
    cursor: "pointer",
    borderRadius: "l1",
    focusVisibleRing: "outside",
  },
  variants: {
    variant: {
      underline: {
        color: "colorPalette.fg",
        textDecoration: "underline",
        textUnderlineOffset: "3px",
        textDecorationColor: "currentColor/20",
      },
      plain: {
        color: "colorPalette.fg",
        _hover: {
          textDecoration: "underline",
          textUnderlineOff

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key