Styleframe Logo
Composables

Caption Element

Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.

Overview

The useCaptionElement composable styles the caption element for table captions with configurable text color, padding on each side, and text alignment.

useCaptionElement

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

const s = styleframe();

const {
    captionColor,
    captionPaddingTop,
    captionPaddingRight,
    captionPaddingBottom,
    captionPaddingLeft,
    captionTextAlign,
} = useCaptionElement(s);

export default s;

Default Values

OptionDefaultVariableExport
color"@color.text-weak"--caption--colorcaptionColor
paddingTop"@spacing.xs"--caption--padding-topcaptionPaddingTop
paddingRight"@spacing.sm"--caption--padding-rightcaptionPaddingRight
paddingBottom"@spacing.xs"--caption--padding-bottomcaptionPaddingBottom
paddingLeft"@spacing.sm"--caption--padding-leftcaptionPaddingLeft
textAlign"left"--caption--text-aligncaptionTextAlign

The default configuration includes a dark theme override that re-references @color.text-weak.

Custom Values

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

const s = styleframe();

const { captionColor, captionTextAlign } = useCaptionElement(s, {
    color: '@color.gray-500',
    paddingTop: '@spacing.sm',
    paddingBottom: '@spacing.sm',
    textAlign: 'center',
});

export default s;

Best Practices

  • Use subdued text color: Caption text is secondary information — use a muted color like @color.text-weak to establish visual hierarchy.
  • Reference spacing tokens: Use @spacing.xs and @spacing.sm for padding to stay consistent with your layout system.
  • Left-align by default: Left alignment is the most readable option for table captions in LTR languages.

Body

Style the body element with configurable color, background, font family, font size, and line height using the useBodyElement composable.

Code

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