Skip to main content
/resources/js/Components/ui/button Shadcn-vue Button component: https://www.shadcn-vue.com/docs/components/button.html

​
Variants

  • Default default
  • Primary primary
  • Secondary secondary
  • Outline outline
  • Ghost ghost
  • Destructive destructive
  • Link link

​
Sizes

  • Default default
  • Very smallx xs Default text size with smaller layout.
  • Small sm Used when there is limited space available.
  • Small slim sm-slim Same as small, but with smaller side padding
  • Large lg
  • Extra large xl
  • Extra extra large 2xl Same as extra large, but bigger from large (Tailwind lg media query) screen. Used with Hero section where the CTA should be distinctive.
  • Icon icon Squared button.

​
Render as button

Full docs coming soon… Full docs coming soon…

​
Render as anchor tag

Full docs coming soon…

​
Processing (loading indicator)

Full docs coming soon…

​
Fake processing

If you want to update processing style, you can fake it for easier testing using sleep() function in your Form Request or Controller. Full docs coming soon…

​
Disabled

Full docs coming soon…

​
Success message after Form submit

Full docs coming soon…
⌘I