Component

BaselineTug

Drag the baseline handle up or down, or focus it and use the arrow keys. The child keeps an actual vertical offset inside a ruled surface until Rejoin baseline restores zero displacement.

Possible use

It could let a reviewer raise a handoff note above a crowded line or let a presenter tune an agenda caption to an imaginary ruler. Both uses preserve an arbitrary offset where normal alignment already exists.

Reasonable alternative

A reasonable local alternative is normal document flow with local alignment or margin CSS. A draggable baseline is an expensive argument about a few pixels.

01 / Preview

Try it yourself.

This note has a baseline dispute.

Mechanism

1: Find the handle beside the ruled surface.
2: Drag it up or down to tug the notice away from its line.
3: Use Arrow Up and Arrow Down for a keyboard-sized dispute.
4: Rejoin the baseline when the offset has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

import { BaselineTug } from "gra-ui";
import "gra-ui/styles.css";

export function MisalignedNotice() {
  return <BaselineTug><span>This note has a baseline dispute.</span></BaselineTug>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content vertically displaced from its ordinary typographic baseline.