Styleframe Logo
Composables

Abbreviation Element

Style abbreviation elements with configurable cursor and text decoration using the useAbbrElement composable.

Overview

The useAbbrElement composable styles abbr[title] elements with a help cursor and dotted underline, making it clear to users that a tooltip is available on hover.

useAbbrElement

function useAbbrElement(
    s: Styleframe,
    options?: WithThemes<AbbrElementConfig>
): AbbrElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useAbbrElement } from '@styleframe/theme';

const s = styleframe();

const { abbrCursor, abbrTextDecoration } = useAbbrElement(s);

export default s;

Default Values

OptionDefaultVariableExport
cursor"help"--abbr--cursorabbrCursor
textDecoration"underline dotted"--abbr--text-decorationabbrTextDecoration

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useAbbrElement } from '@styleframe/theme';

const s = styleframe();

const { abbrCursor, abbrTextDecoration } = useAbbrElement(s, {
    cursor: 'pointer',
    textDecoration: 'underline dashed',
});

export default s;

Best Practices

  • Keep the help cursor: The default help cursor signals to users that additional information is available on hover.
  • Use dotted underlines: The underline dotted decoration distinguishes abbreviations from regular links while indicating interactivity.
  • Always include a title attribute: The composable targets abbr[title], so elements without a title attribute are unaffected.

Preset

Apply all HTML element base styles in a single call with useGlobalPreset, including body, headings, links, lists, code, focus, and selection.

Address

Style address elements with configurable bottom margin using the useAddressElement composable.