DocsComponentsCommerce
WishlistButton
ts
import { WishlistButton } from "@grassroot/ui-react"; <WishlistButton defaultPressed /><WishlistButton size="lg" />ts
<script setup lang="ts">import { WishlistButton } from "@grassroot/ui-vue";</script> <template> <WishlistButton default-pressed /> <WishlistButton size="lg" /></template>ts
import { Component } from "@angular/core";import { GrassrootWishlistButton } from "@grassroot/ui-angular"; @Component({ selector: "app-example", standalone: true, imports: [GrassrootWishlistButton], template: ` <grassroot-wishlist-button [defaultPressed]="true" /> <grassroot-wishlist-button size="lg" /> `,})export class ExampleComponent {}ts
<script lang="ts"> import { WishlistButton } from "@grassroot/ui-svelte";</script> <WishlistButton defaultPressed /><WishlistButton size="lg" />ts
import { WishlistButton } from "@grassroot/ui-solid"; export function Example() { return ( <> <WishlistButton defaultPressed /> <WishlistButton size="lg" /> </> );}Installation
bash
pnpm dlx grassroot add ui/wishlist-buttonbash
npx grassroot@latest add ui/wishlist-buttonbash
yarn dlx grassroot add ui/wishlist-buttonbash
bunx grassroot add ui/wishlist-buttonAPI Reference
| Prop | Type | Default |
|---|---|---|
pressed | boolean | undefined | — |
defaultPressed | boolean | undefined | — |
onPressedChange | ((pressed: boolean) => void) | undefined | — |
size | "sm" | "md" | "lg" | undefined | "md" |