MenuCaderno UI
npmGitHub
Theme

<cad-bookmark>

Bookmark

Save or unsave an item. Optionally remember the choice on this device.

Persistent bookmark

Reload the page after toggling; this example keeps its state locally.

Toggle the bookmark to inspect its event detail.

Saved and unsaved

Saving to local storage is optional.

Not saved

Saved

API reference: <cad-bookmark>

active-labelactiveLabelstring'Remove bookmark'bookmark-idbookmarkIdstring''bookmarkedbookmarkedbooleanfalselabellabelstring'Save bookmark'persistpersistbooleanfalsestorage-prefixstoragePrefixstring'caderno-ui:bookmark'activeLabelstringactive-labelnobookmarkIdstringbookmark-idnobookmarkedbooleanbookmarkedyeslabelstringlabelnopersistbooleanpersistyesstoragePrefixstringstorage-prefixnocad-bookmark-changeCustomEventFired whenever the bookmark state changes.fallbackOptional pre-upgrade fallback hidden after definition.buttonNative bookmark button.iconBookmark icon.labelVisible button label.--cad-bookmark-bgBookmark paper color.--cad-bookmark-inkBookmark foreground color.

Events

cad-bookmark-change reports { active, id } and bubbles to parent elements.

Accessibility

The button exposes aria-pressed. Give both states clear labels, such as “Save note” and “Remove saved note”.

MIT licensed. Built with Caderno UI.Report an issue
Back to top