Styleframe Logo
Forms & Tables

Caption Element

Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.
Part of the Global Preset:useCaptionElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's caption option. For most projects, applying it via the preset is the recommended approach.

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.

Iframe

Remove the default border from iframe elements using the useIframeElement composable.

Legend

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