The asChild prop

Pass a child element to make it inherit the styles and props.

All components that support the asChild prop will inherit the styles and props of the parent component.

Creating new Components

You can use the ark factory to create your own elements that work just like the components in the library.


import { ark } from '@ark-ui/react/factory'
 
interface ButtonExampleProps extends 
  React.ComponentProps<typeof ark.button> {}
 
export const ButtonExample = (props: ButtonExampleProps) => (
  <ark.button {...props} />
)


import Link from "next/link";
 
<ButtonExample asChild>
  <Link href="/login">Login </Link>
</ButtonExample>

Example

Link

You can use the asChild prop to make a link styled as a button.


<Button asChild>
  <Link href="/login">Login </Link>
</Button>

Badge

You can use the asChild prop to make a badge styled as a button.


<Badge asChild>
  <Link href="/login">Login </Link>
</Badge>

Dialog

You can use the asChild prop to make a dialog styled as a button.


<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  {/* ... */}
</Dialog>

You can use the asChild prop to make a menu styled as a button.


<Menu>
  <MenuTrigger asChild>
    <Button>Open</Button>
  </MenuTrigger>
  {/* ... */}
</Menu>

You can use the asChild prop to make a popover styled as a button.


<Popover>
  <PopoverTrigger asChild>
    <Button>Open Popover</Button>
  </PopoverTrigger>
  {/* ... */}
</Popover>

On This Page

Creating new Components Example Link Badge Dialog Menu Popover