Defines base styles and variant recipes for Chakra Link component, enabling consistent theming.
// 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 "../../styled-system"
export const linkRecipe = defineRecipe({
className: "chakra-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",
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search 40K more like it.
Get a free API key