Dependencies
This layout uses the following components as "atoms" to create the full UI.
Uses: Components:Favourite Button
A typical click to add/remove favourites button.
<button class="c-btn c-btn--tertiary t-btn-fav" x-data="{ fav: false }" @click="fav = ! fav" :class="fav ? 'is-active' : 'is-inactive'">
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>With Tooltip
Add a tooltip to show the state of the favourites button.
<button class="c-btn c-btn--tertiary t-btn-fav"
x-data="{ fav: false }"
@click="fav = ! fav"
:class="fav ? 'is-active' : 'is-inactive'"
x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }"
>
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>