Bookmark

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { Bookmark } from "@hua-labs/hua";

default

filled

outline


`id*`	`string`	-	Unique bookmark ID
`storageKey`	`string`	`"bookmarks"`	localStorage key for storing bookmarks
`defaultBookmarked`	`boolean`	`false`	Initial bookmarked state
`onBookmarkChange`	`(bookmarked: boolean) => void`	-	Callback when bookmark state changes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Bookmark button size
`variant`	`"default" \| "filled" \| "outline"`	`"default"`	Visual variant

Code Examples

docs:common.basicUsagetsx

1import { Bookmark } from '@hua-labs/hua';
2 
3<Bookmark id="article-1" />

docs:components.bookmark.examples.stateChangetsx

1<Bookmark
2  id="article-1"
3  onBookmarkChange={(bookmarked) => {
4    console.log('Bookmarked:', bookmarked);
5  }}
6/>

docs:components.bookmark.examples.sizesVariantstsx

1// 크기
2<Bookmark id="item-1" size="sm" />
3<Bookmark id="item-2" size="md" />
4<Bookmark id="item-3" size="lg" />
5 
6// 변형
7<Bookmark id="item-4" variant="default" />
8<Bookmark id="item-5" variant="filled" />
9<Bookmark id="item-6" variant="outline" />

docs:components.bookmark.examples.customStorageKeytsx

1// 다른 localStorage 키 사용
2<Bookmark
3  id="product-123"
4  storageKey="favorite-products"
5/>

•docs:common.accessibility.focusRing: docs:components.bookmark.accessibility.focusRingDesc
•docs:components.bookmark.accessibility.buttonElement: docs:components.bookmark.accessibility.buttonElementDesc

SectionHeader ActionToolbar