Polymorphic button using Slot

[tavoyne]

I'm moving away from the as prop and trying to reimplement my design system's polymorphic components using Slot.

I'm stuck on the Button one. It should be able to take in and render an Icon component.

I think the final API should look like:

<Button icon={Icon} variant="contained">
  <button onClick={(evt) => { console.log(evt); }}>Download</button>
</Button>

It should produce the following HTML:

<button class="contained">
  <svg><!-- ... --></svg>
  Download
</button>

But I'm struggling with the implementation of the component itself. This is what it currently looks like:

import { Slot } from "@radix-ui/react-slot";

export interface ButtonProps {
  Icon?: React.ComponentType;
  children: JSX.Element;
  variant?: "contained" | "outlined";
}

export default function Button({
  Icon,
  children,
  variant = "contained",
}: ButtonSlotProps) {
  return <Slot children={children} className={variant} />;
}

It works but, of course, it's not injecting the icon. And I can't see how to do so in such a way that I get the desired result.

My intuition is that the Slot design won't allow me to do what I want. So, my question is, is that the case? And if it is, do you know any workaround?

[jjenzz]

The Slot component also exports a Slottable part which is for when you need to provide a sibling to the passed children. It might be good to add this to the docs actually, but here's how it works:

import { Slot, Slottable } from "@radix-ui/react-slot";

export interface ButtonProps {
  Icon?: React.ComponentType;
  children: JSX.Element;
  variant?: "contained" | "outlined";
}

export default function Button({
  Icon,
  children,
  variant = "contained",
}: ButtonSlotProps) {
  return (
    <Slot className={variant}>
      <svg><!-- ... --></svg>
      <Slottable>{children}</Slottable>
    </Slot>
  );
}

The Slottable tells the Slot which part it should slot onto if there is more than one child in the Slot.

[tavoyne]

Thanks for your reply.

I'm not sure in what scenario this Slottable component would be useful.

In your example it isn't necessary. The svg element could simply be moved out from Slot's descendants:

return (
  <>
    <svg><!-- ... --></svg>
    <Slot className={variant}>
      {children}
    </Slot>
  </>
);

But both alternatives don't resolve the problem properly because, in the produced HTML, svg isn't a child of button.

We get this:

<svg><!-- ... --></svg>
<button class="contained">
  Download
</button>

Whereas we want this:

<button class="contained">
  <svg><!-- ... --></svg>
  Download
</button>

[tavoyne]

The only implementation I can think of right now uses React.cloneElement:

function Button({
  children,
  icon,
  variant = "contained"
}: ButtonProps): JSX.Element {
  return (
    <Slot className={variant}>
      {icon
        ? React.cloneElement(
            children,
            undefined,
            <>
              {icon}
              {children.props.children}
            </>
          )
        : children}
    </Slot>
  );
}

SandBox Link

This produces the desired result, but is quite bad IMO in terms of DX. I'm sure the Slot component could provide a way better abstraction, like for example by allowing some elements to be appended/prepended to the child's children.

This would enable a lot of use cases.

I could work on a PR if it's something you'd consider integrating.

We could also get rid of the Slottable bit. It would enable the Slot's children to be typed as JSX.Element. Right now it's typed as React.ReactNode, which allows providing many elements, although an error is thrown at runtime when doing so.

[jjenzz]

my understanding was that the Slottable should give you what you're trying to achieve but i've just tested here and it's not working, like you say. i think that might be a bug in Slottable.

[tavoyne]

Given the source code, the result was expectable.

This is from https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx:

const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
  const { children, ...slotProps } = props;

  if (React.Children.toArray(children).some(isSlottable)) {
    return (
      <>
        {React.Children.map(children, (child) => {
          return isSlottable(child) ? (
            <SlotClone {...slotProps} ref={forwardedRef}>
              {child.props.children}
            </SlotClone>
          ) : (
            child
          );
        })}
      </>
    );
  }

  return (
    <SlotClone {...slotProps} ref={forwardedRef}>
      {children}
    </SlotClone>
  );
});

We can see on line 7-14 that children are just rendered next to each other. That's why I really don't understand what this Slottable component is for. Maybe it'd be great to allow only one slottable children per Slot and render all non-slottable children as children of the only slottable element, in their order of appearance. This should make your example produce the expected result.

Should I open an issue?

Again, I can prepare a PR for that.

[jjenzz]

when we built Slottable, the intention was for it to support what you describe so we may have broken that somehow over time.

yes, please open an issue 🙏

[adonaicandido]

I was able to achieve something similar, maybe this help someone that comes across this discussion.

Here is how I use it:

<Button asChild iconRight={<Calendar />}>
  <a href='#'>Add to calendar</a>
</Button>

We get this:

<a class="root-classes" href="#">
  <span>Add to calendar</span>
  <svg class="right-icon-classes"><!-- ... --></svg>
</a>

Here is the implementation:

const Button = forwardRef(
  function Button({ asChild, children, iconLeft, iconRight, ...rest }, forwardedRef) {
    const BaseSlot = asChild ? Slot : 'button'
    const IconSlot = Slot

    return (
      <BaseSlot
        ref={forwardedRef}
        {...rest}
        className='root-classes'}
      >
        <IconSlot className='left-icon-classes'>{iconLeft}</IconSlot>
        <span>{children}</span>
        <IconSlot className='right-icon-classes'>{iconRight}</IconSlot>
    )
  },
)

Note: I didn't test the above code and my ACTUAL implementation is a bit different, but the idea is there. All that took for my use case was to simply use another Slot component inside the main one.

[piotrkulpinski]

This will trigger the following error for me:

React.Children.only expected to receive a single React element child.

Am I doing something wrong?

[thtliife]

I think the final API should look like:

<Button icon={Icon} variant="contained">
  <button onClick={(evt) => { console.log(evt); }}>Download</button>
</Button>

import { Slot } from "@radix-ui/react-slot";

export interface ButtonProps {
  Icon?: React.ComponentType;
  children: JSX.Element;
  variant?: "contained" | "outlined";
}

export default function Button({
  Icon,
  children,
  variant = "contained",
}: ButtonSlotProps) {
  return <Slot children={children} className={variant} />;
}

It works but, of course, it's not injecting the icon. And I can't see how to do so in such a way that I get the desired result.

in this... if you are using the button like this:

<Button icon={Icon} variant="contained">
  <button onClick={(evt) => { console.log(evt); }}>Download</button>
</Button>

Then you are passing an icon property as icon (lower case i) to your component....

The component you specified is asking for the icon property to begin with an upper case i.
Could it be as simple as calling the button like:

<Button Icon={Icon} variant="contained">
  <button onClick={(evt) => { console.log(evt); }}>Download</button>
</Button>

or imo the cleaner way, changing your component to look like this?

import { Slot } from "@radix-ui/react-slot";

export interface ButtonProps {
  icon?: React.ComponentType;
  children: JSX.Element;
  variant?: "contained" | "outlined";
}

export default function Button({
  icon,
  children,
  variant = "contained",
}: ButtonSlotProps) {
  return <Slot children={children} className={variant} />;
}