Slot

Slot implements a flexible composition pattern for components that need to render as different elements. Sometimes a Button component must render as a native button or as an a depending on usage. Slot merges parent props into the chosen child element while preserving styles, event handlers, and refs.

const Slot: ForwardRefExoticComponent<
  React.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>
>;

function Slottable(props: {
  children: React.ReactNode;
}): React.ReactElement;

Basic usage#

Use the asChild pattern to let consumers control the rendered element while maintaining the component's styling and behavior.

import { Slot, Slottable } from '@ilokesto/utilinent';

function Button({ asChild, ...props }) {
  const Comp = asChild ? Slot : 'button';
  return <Comp {...props} />;
}

// render as a button
<Button onClick={handleClick}>클릭</Button>

// render as a link
<Button asChild>
  <Link to="/home">홈으로</Link>
</Button>

Slottable#

Wrap parts of complex structures with Slottable to pass props to specific child elements—useful for buttons with icons or compound components.

<Slot style={{ color: 'red' }}>
  <div>
    <Icon />
    <Slottable>
      <span>이 span에만 style이 적용됨</span>
    </Slottable>
  </div>
</Slot>