Trying to style the disclosure primitive as a secondary button.

[andioneto]

Hi folks,
I'm trying to style the disclosure primitive and having a bit of a rough go of it.
I'd like to have secondary button styles. Ideally with the disabled styles available. Other than re-creating the styles with emotions and token names from the theme provider, is there an easier way to do this?

[SiTaggart]

Hi @andipants12

The docs could be clearer for the primitive. Essentially you can pass the DisclosurePrimitive an as prop, which can be any component really.

For example you can pass it a Button from Paste and it'll act like that button, whilst passing it's functional props via the hook. I've created a sandbox to demo it.

https://codesandbox.io/s/disclosure-example-dbhki

[andioneto]

Thank 👏 you 👏 so 👏 much! I was trying to do as="button". 🤦‍♀️

[andioneto]

So I did a few things and you can look at this sandbox to see what I think works best.

I think the button under the paragraph makes the most sense. I mulled over using the button as a link here but I think with the button (even secondary), it was too noisy.

See you all next week 👋