Styleframe Logo
Composables

Link Element

Style anchor elements with configurable color, text decoration, and hover states using the useLinkElement composable.

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;

Default Values

OptionDefaultVariableExport
color"@color.primary"--link--colorlinkColor
textDecoration"none"--link--text-decorationlinkTextDecoration
hoverColor"@color.primary-700"--link--hover--colorlinkHoverColor
hoverTextDecoration"underline"--link--hover--text-decorationlinkHoverTextDecoration

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;

Best Practices

  • Use your primary color: The default @color.primary keeps 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.

Legend

Style legend elements for proper form layout using the useLegendElement composable.

Lists

Style ordered and unordered list elements with configurable margin and padding using the useOlElement and useUlElement composables.