Cover

Use Cover to to expand and fill up the whole area of the parent which has position: relative using the ::before pseudo element.

Combine this component with other interactive controls like Checkbox, Link, or Button to allow interacting with an element while also having nested controls inside that element.

Source

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Primary Link


import { IconStar } from "@optiaxiom/icons";
import { Button, Cover, Group, Link } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group
      border="1"
      fontSize="md"
      gap="16"
      justifyContent="space-between"
      px="24"
      py="16"
      rounded="md"
      style={{ position: "relative" }}
      w="224"
    >
      <Cover asChild>
        <Link appearance="subtle" href="data:," rounded="inherit">
          Primary Link
        </Link>
      </Cover>
      <Button appearance="subtle" icon={<IconStar />} />
    </Group>
  );
}

#
Related

Checkbox

Basic control to allow selecting one or more items from a set.

Link

Anchor element for creating hyperlinks.

Button

Button component is used to trigger actions.

#
Props

#
Cover

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`disabled` Whether to expand and fill up the whole area of the parent which has `position: relative`. `false \| true` Default: `false`
`inset` Whether to offset the outline or not. `false \| true` Default: `false`

#
Changelog

#
1.4.0

Added component