Typography
Link Element
Style anchor elements with configurable color, text decoration, and hover states using the useLinkElement composable.
Part of the Global Preset:
useLinkElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's link option. For most projects, applying it via the preset is the recommended approach.Overview
The useLinkElement composable styles a elements with configurable color and text decoration for both default and hover states. It creates CSS variables for each property, making link styling easy to customize per-theme.
useLinkElement
function useLinkElement(
s: Styleframe,
options?: WithThemes<LinkElementConfig>
): LinkElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useLinkElement } from '@styleframe/theme';
const s = styleframe();
const {
linkColor,
linkTextDecoration,
linkHoverColor,
linkHoverTextDecoration,
} = useLinkElement(s);
export default s;
styleframe/index.css
:root {
--link--color: var(--color--primary);
--link--text-decoration: none;
--link--hover--color: var(--color--primary-700);
--link--hover--text-decoration: underline;
}
a {
color: var(--link--color);
text-decoration: var(--link--text-decoration);
}
a:hover {
color: var(--link--hover--color);
text-decoration: var(--link--hover--text-decoration);
}
Default Values
| Option | Default | Variable | Export |
|---|---|---|---|
color | "@color.primary" | --link--color | linkColor |
textDecoration | "none" | --link--text-decoration | linkTextDecoration |
hoverColor | "@color.primary-700" | --link--hover--color | linkHoverColor |
hoverTextDecoration | "underline" | --link--hover--text-decoration | linkHoverTextDecoration |
Custom Values
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useLinkElement } from '@styleframe/theme';
const s = styleframe();
const { linkColor, linkHoverColor } = useLinkElement(s, {
color: '@color.info',
textDecoration: 'underline',
hoverColor: '@color.info-700',
hoverTextDecoration: 'none',
});
export default s;
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';
const s = styleframe();
const { link } = useGlobalPreset(s, {
link: {
color: '@color.info',
textDecoration: 'underline',
hoverColor: '@color.info-700',
hoverTextDecoration: 'none',
},
});
export default s;
styleframe/index.css
:root {
--link--color: var(--color--info);
--link--text-decoration: underline;
--link--hover--color: var(--color--info-700);
--link--hover--text-decoration: none;
}
a {
color: var(--link--color);
text-decoration: var(--link--text-decoration);
}
a:hover {
color: var(--link--hover--color);
text-decoration: var(--link--hover--text-decoration);
}
Best Practices
- Use your primary color: The default
@color.primarykeeps links consistent with your brand. Use a darker shade for hover to signal interactivity. - Consider underline for accessibility: While the default removes underlines, adding
textDecoration: "underline"helps users who rely on visual cues other than color. - Customize per-theme: Use theme overrides to adjust link colors for dark mode (e.g., lighter shades that remain readable against dark backgrounds).
- Keep hover feedback clear: Always provide a visible change on hover — either a color shift, underline toggle, or both.