Preview Code
Style: Shadcn
Default
Default CSS
Button 
<vanilla-button>Button</vanilla-button>

​
Installation 

npm i @vanilla-primitives/styled

defineVanillaUI({
    designSystem: "shadcn-default",
});

​
Usage 

<vanilla-button variant="outline">Button</vanilla-button>

You can use the href prop on vanilla-button to turn it to a <a> tag.

<vanilla-button href="/login">Login</vanilla-button>

Alternatively, you can set the asChild parameter and nest the <a> tag.

<vanilla-button asChild>
  <a href="/login">Login</a>
</vanilla-button>

​
Examples

​
Primary

Preview Code
Style: Shadcn
Default
Default CSS
Button 
<vanilla-button>Button</vanilla-button>

​
Secondary

Preview Code
Style: Shadcn
Default
Default CSS
Secondary 
<vanilla-button variant="secondary">Secondary</vanilla-button>

​
Destructive

Preview Code
Style: Shadcn
Default
Default CSS
Destructive 
<vanilla-button variant="destructive">Destructive</vanilla-button>

​
Outline

Preview Code
Style: Shadcn
Default
Default CSS
Outline 
<vanilla-button variant="outline">Outline</vanilla-button>

​
Ghost

Preview Code
Style: Shadcn
Default
Default CSS
Ghost 
<vanilla-button variant="ghost">Ghost</vanilla-button>
Preview Code
Style: Shadcn
Default
Default CSS
Link 
<vanilla-button variant="link">Link</vanilla-button>

​
Icon

Preview Code
Style: Shadcn
Default
Default CSS 
<vanilla-button variant="outline" size="icon"
    ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
    ></vanilla-button
>

​
With Icon

Preview Code
Style: Shadcn
Default
Default CSS
Login with Email 
<vanilla-button
    ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-mail mr-2 h-4 w-4"
        ><rect width="20" height="16" x="2" y="4" rx="2"></rect><path
            d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg
    >
    Login with Email</vanilla-button
>

​
Loading

Preview Code
Style: Shadcn
Default
Default CSS
Please wait 
<vanilla-button disabled
    ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-loader-circle mr-2 h-4 w-4 animate-spin"
        ><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg
    >
    Please wait</vanilla-button
>

​
As Child

Preview Code
Style: Shadcn
Default
Default CSS
Login 
<vanilla-button asChild>
    <a href="/login">Login</a>
</vanilla-button>
Introduction