Button Component with Radix-UI and Slot approach - How to add icon?
Answered
Basset Artésien Normand posted this in #help-forum
Basset Artésien NormandOP
Hi All.
If am looking to build a button component like this: https://medium.com/@wdswy/how-to-build-highly-reusable-react-components-in-next-js-13-tailwindcss-and-radix-ui-a17cf5fbed99
using CVA and tailwind using the slot approach in NextJS.
How can an Icon be passed as a prop in the event of using the
If am looking to build a button component like this: https://medium.com/@wdswy/how-to-build-highly-reusable-react-components-in-next-js-13-tailwindcss-and-radix-ui-a17cf5fbed99
using CVA and tailwind using the slot approach in NextJS.
How can an Icon be passed as a prop in the event of using the
asChild prop ? as with React Slot when using it, it can only have a single child so it feels like the onyl way is to pass the icon as a child down to the button, for example<Button asChild variant='primary'>
<Link>
Blah
<Icon />
</Link>
</Button>Answered by Ray
wrap the children with
https://www.radix-ui.com/primitives/docs/utilities/slot#basic-example
<Slottable />https://www.radix-ui.com/primitives/docs/utilities/slot#basic-example
21 Replies
Basset Artésien NormandOP
import { Slot } from '@radix-ui/react-slot'
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{
props
},
ref
) => {
const Comp = asChild ? Slot : 'button'
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
>
{/* {IconBefore ?? null} */}
{children && children}
{/* {IconAfter ?? null} */}
</Comp>
)
}
)Because in the event
asChildis set, Slot is used and that only accepts a single childBecause then i need to use the IconBefore/After and then there is multiple children
@joulev <Button icon={<Icon />}>Blah</Button>?
Basset Artésien NormandOP
this works but not when using react-slot - Slot only accepts a single child
I can't think of another way around this other than always putting the icon in as a child...
ok so how exactly do you want it to work? you can always have as many
asChild props as you want: asChild1, asChild2, etc.Slot can only have one child yes
because otherwise how would youe xpect it to work
Basset Artésien NormandOP
oh i just want to know the best solution
i thought passing the icon as prop would be best. but that doesnt work in this case
asChildin this case is just a booleanhmm sorry i dont understand your question then
Basset Artésien NormandOP
my questions is this
what is the best practice for passing an icon to the above button component?
taking inspiration from this post: https://medium.com/@wdswy/how-to-build-highly-reusable-react-components-in-next-js-13-tailwindcss-and-radix-ui-a17cf5fbed99
what is the best practice for passing an icon to the above button component?
taking inspiration from this post: https://medium.com/@wdswy/how-to-build-highly-reusable-react-components-in-next-js-13-tailwindcss-and-radix-ui-a17cf5fbed99
Is the only way for me to proceed to pass the icon as a child everytime I want a button with icon?
@joulev ok so how exactly do you want it to work? you can always have as many `asChild` props as you want: `asChild1`, `asChild2`, etc.
Basset Artésien NormandOP
not sure what you mean by this as
asChild only decides if the slot component is used or notsorry, ignore what i said. i completely do not understand the question
Basset Artésien NormandOP
i don't think i can be any clearer
@Basset Artésien Normand Hi All.
If am looking to build a button component like this: https://medium.com/@wdswy/how-to-build-highly-reusable-react-components-in-next-js-13-tailwindcss-and-radix-ui-a17cf5fbed99
using CVA and tailwind using the slot approach in NextJS.
How can an Icon be passed as a prop in the event of using the `asChild` prop ? as with React Slot when using it, it can only have a single child so it feels like the onyl way is to pass the icon as a child down to the button, for example
ts
<Button asChild variant='primary'>
<Link>
Blah
<Icon />
</Link>
</Button>
Basset Artésien NormandOP
Maybe the code snippet attached here is the only way to achieve this?
Because it seems passing the icon as a prop will simply not work when using react-slot; as then there will be multiple children
Because it seems passing the icon as a prop will simply not work when using react-slot; as then there will be multiple children
@Basset Artésien Normand Maybe the code snippet attached here is the only way to achieve this?
Because it seems passing the icon as a prop will simply not work when using react-slot; as then there will be multiple children
wrap the children with
https://www.radix-ui.com/primitives/docs/utilities/slot#basic-example
<Slottable />https://www.radix-ui.com/primitives/docs/utilities/slot#basic-example
Answer
Basset Artésien NormandOP
will test now thanks
Basset Artésien NormandOP
thanks @Ray