Breakout

Wrapping a link or button around a large chunk of content would be poor for accessibility and often leads to invalid HTML.

Instead, Breakout* components let a link or button stretch to the nearest position: relative ancestor while still targeting only the relevant content.

For semantics, both BreakoutButton and BreakoutLink components are provided, however they’re essentially identical.

You can use the render prop to change the rendered element.

Installation

import {
  BreakoutButton,
  BreakoutLink,
} from "@o/pipeline/experimental/components/breakout";

Components

BreakoutButton

Company
O
People
  • JB
Domain
Company
OOperate
People
  • JB
Domain

Further reading