[Feature]: Button Busy/Loading prop

[KonradDRAST]

Describe the feature

It's something that I add every time I add the <Button> component to my project. In the real world, buttons are often used to perform async actions (even shown as one of your examples) and it would be nice if the <Button> component had any tool for dealing with a loading state.

At this point, I'm simply adding loading?: boolean to interface Props, then using it as the second option for disabled in button primitive, and passing as :loading="loading" as slot prop.

There may be a better way of dealing with it, and useful for all shadcn-vue users.

Additional information

• [ ] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[romanhrynevych]

We already have loading demo link, don't think it's worth to add spinner to "every" button inside this UI library, if you want to add this in your project, you can navigate to Button.vue component and expand logic for every button will be with loading

Refer to original library, there is also different loading Demo with same logic: link

@sadeghbarati srry for taging, what you think, need to extend Button.vue or close this issue?

[sadeghbarati]

It's ok feel free to tag 👍

the user has to extend Button.vue source but it's good to have an example

[romanhrynevych]

we already have an example, so think this issue is not relevant 🤔

[sadeghbarati]

@romanhrynevych our ButtonLoadingDemo is hard-coded

Maybe we can have ButtonLoadingHandledWithPropsDemo

[sadeghbarati]

@KonradDRAST

Check out React version of shadcn-ui Button for loading

https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/main/components/ui/loading-button.tsx https://shadcnui-expansions.typeart.cc/docs/loading-button

[sadeghbarati]

https://x.com/buildWithKris/status/1749821303668850894?t=ybeu4B6km-bKC_iiHXXxxg&s=35

[KonradDRAST]

Check out React version of shadcn-ui Button for loading

https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/main/components/ui/loading-button.tsx https://shadcnui-expansions.typeart.cc/docs/loading-button

That's basically what I have now. Custom "AsyncButton" component the is built as a wrapper for Shadcn Button component. + custom prop "loading" added to Button code itself.

[sadeghbarati]

Let's keep the docs simple 🙏

for me, shadcn-vue is more like documentation or a low-level component or a starting point