BookmarkButton.razor

<button type="button" class="btn btn-sm bg-transparent border-0" @onclick="OnBookmarkClicked" title="@(IsBookmarked ? "Remove bookmark" : "Add bookmark")">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="@(IsBookmarked ? "text-warning" : "text-secondary")" viewBox="0 0 16 16">
        <path d="@(IsBookmarked ?
            "M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z" :
            "M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z")"/>
    </svg>
</button>

@code {
	[Parameter] public bool IsBookmarked { get; set; }
	[Parameter] public EventCallback Bookmarked { get; set; }

	private async Task OnBookmarkClicked()
	{
		await Bookmarked.InvokeAsync();
	}
}