Inline Text

Abbreviation Element

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

Part of the Global Preset:useAbbrElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's abbr option. For most projects, applying it via the preset is the recommended approach.

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;

styleframe/index.css

:root {
    --abbr--cursor: help;
    --abbr--text-decoration: underline dotted;
}

abbr[title] {
    cursor: var(--abbr--cursor);
    text-decoration-skip-ink: none;
    text-decoration: var(--abbr--text-decoration);
}

Default Values

Option	Default	Variable	Export
`cursor`	`"help"`	`--abbr--cursor`	`abbrCursor`
`textDecoration`	`"underline dotted"`	`--abbr--text-decoration`	`abbrTextDecoration`

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;

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

const { abbr } = useGlobalPreset(s, {
    abbr: {
        cursor: 'pointer',
        textDecoration: 'underline dashed',
    },
});

export default s;

styleframe/index.css

:root {
    --abbr--cursor: pointer;
    --abbr--text-decoration: underline dashed;
}

abbr[title] {
    cursor: var(--abbr--cursor);
    text-decoration-skip-ink: none;
    text-decoration: var(--abbr--text-decoration);
}

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.

Edit this pageorReport an issue

Definition Lists

Style definition list elements (dl, dt, dd) with configurable margin, font weight, and spacing using the useDlElement, useDtElement, and useDdElement composables.

Code

Style inline code and preformatted text blocks with configurable font family, font size, and spacing using the useCodeElement and usePreElement composables.