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

#
Documentation

#
Usage

Primary Link


import { Button, Cover, Flex, Link } from "@optiaxiom/react";
import { IconStar } from "@tabler/icons-react";
 
export function App() {
  return (
    <Flex
      border="1"
      flexDirection="row"
      fontSize="md"
      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 />} />
    </Flex>
  );
}

#
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`
`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

Cover

#Documentation

#Usage

#Props

#Cover

#Changelog

#1.4.0