Announcer: You're listening to the Call Kent Podcast where Kent C. Dodds answers questions and gives insights to software engineers like you. Now let's hear the call. --- Taranveer: Hey Kent, forgive the background noise if you can hear it. I'm over at my girlfriend's place and her family is rambunctious. I had a question regarding exposing some internal styles from our component library to our consumers. So the use case is my colleague has a component that looks like one of our buttons but isn't actually a button. It just visually looks like a button. And so right now his workaround is to use our button but put a tab index of zero and disable it and disable it to get the look and disable it to get the look and feel that he's looking for, which is a hack for sure. So in that instance, how would we get around exporting some of these internal styles or giving the users a way to kind of make an element look like a button but it's not a button? So would we use maybe the as child prop that Radix and Shad do or maybe the render prop style that Base UI is using? Just happy to hear your thoughts. Thank you for your thoughts. --- Announcer: That was the call. Here's what Kent had to say. --- Kent: Hey, Taryn, what's up? Thanks for the question. So this is actually a really common thing. I've got it pretty much in all of my projects. And you are absolutely correct. Your intuition is right. You should not be just rendering buttons that are disabled. That is bad. So don't do that. Really, all they're trying to get is the styles for the button. They want to make a thing that is styled like a button. And just like everything else in JavaScript, you can simply take that string of class names names and make it a variable and make it a variable and export that and people can import it. Now there definitely is something to be said for maybe that string is dynamic. And okay, now you can make it a function that accepts parameters and now it can be dynamic. And to take it a step further, what I often use is this library called CVA, which stands for Class Variance Authority. And this is actually pretty popular in the Tailwind world. But yeah, just in general, really useful library for a really useful library for creating multiple variants of a set of class names. Yeah, I use this for a lot of stuff, not just for the specific use case. But yeah, in combination with what you're talking about, CVA is pretty good. So check out CVA.style works really well with CLSX as well. So yeah, anyway, like I said, this is pretty common. Definitely something that you want to have like an official way of doing. In fact, I'm going to have like an official way of doing. In fact, I even some in lots of projects will have a component that is your button component, but then also I'll have a button as a link component and even a link as button component. And no, I'm not using the as prop inspired by Radix for this. I think that is completely unnecessary. For this, it's just so much easier to have individual components for each one of those, because really, all you're actually sharing is the class name is the class name. And that, yeah, that's easy to do. So hopefully that is helpful and makes sense. And I hope you have a wonderful day. Take care. --- Announcer: This has been the Call Kent Podcast. Learn more about Kent at kentcdodds.com and get your own questions answered at kentcdodds.com/calls.