TextBreak

Render a horizontal divider line with an optional inline label and loading indicator.

TextBreak renders a full-width row with thin rule lines on either side of a text label. Use it to separate groups of options, list sections or unread messages.

Import#

typescript

import { TextBreak } from "@reactberry/system/blocks";

Usage#

typescript

import { TextBreak } from "@reactberry/system/blocks";
import { Box, Button } from "@reactberry/system/elements";

export default function SignInOptions() {
  return (
    <Box display="flex" flexDirection="column" gap="m" p="l">
      <Button variant="default">Continue with email</Button>
      <TextBreak message="or" />
      <Button variant="default">Continue with SSO</Button>
    </Box>
  );
}

Examples#

Colour schemas#

colorSchema sets the label and line colours: "default", "attention" or "accent".

Yesterday

3 unread messages

New since your last visit

Position#

position="left" hides the left line and position="right" hides the right line, so the label sits at that edge.

Recent activity

Loading#

Set loading to show an animated dots icon before the label. Click the button to toggle it.

Syncing

API#

TextBreak#

Prop	Type	Default	Description
`message`	`string`	—	Label text. Takes precedence over `children`.
`colorSchema`	`string`	`default`	`"default"`, `"attention"` or `"accent"`. Sets the label and line colours. Unknown values fall back to `"default"`.
`loading`	`boolean`	—	Shows an animated dots icon before the label. Only visible when there is a label.
`showBreaks`	`boolean`	`true`	Renders the rule lines.
`position`	`"center""left""right"`	`"center"`	Label alignment. `"left"` hides the left line and `"right"` hides the right line.
`children`	`ReactNode`	—	Label content used when `message` is not set.
`contentProps`	`{ [key: string]: any; }`	`{}`	Props spread onto the label wrapper.
`breakProps`	`{ [key: string]: any; }`	`{}`	Props spread onto each rule line.

All remaining props are spread onto the outer Text (rendered as a div), which defaults to display="flex", width="100%", fontSize="xsmall" and gap="xsmall".

Accessibility#

TextBreak renders plain div elements with no role. The label is read as normal text; the lines are empty divs and are not announced.

Notes#

Colour schemas map to [lineColour, textColour]: default is tertiary / secondary, attention is currentColor / red, accent is currentColor / accent.
Lines are 1px high with opacity 0.25. Use breakProps to override.
The label is not rendered when both message and children are empty; only the lines remain. The loading icon is part of the label, so it is not shown either.
With position="left" the label has no horizontal padding; otherwise it uses px="small".
TextBreakProps is not exported.