Wishlist Notice
Removing something on the wishlist page takes its card away and offers Undo in a floating notice. Place a Wishlist Notice anywhere on that page to give it your colours, words and position: it stays hidden until it is needed. Pages without one show the notice with the words from Fancy Etch → Texts → Wishlist.
Its options
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| Message | text | %s was removed from your wishlist. | %s is where the item's name goes. Leave it out and the message says the same for everything. |
| Undo label | text | Undo | |
| Close label | text | Dismiss | Read by screen readers on the close button, which shows only a cross. |
| Position | choice: bottom, top, middle | bottom | Top suits a shop with something fixed at the bottom: a chat, a cookie banner. Middle covers the page. |
| Alignment | choice: center, start, end | center | |
| Colors → Background | text | var(--fe-woo-surface, #ffffff) | |
| Colors → Text | text | var(--fe-woo-color, #111827) | |
| Colors → Border | text | var(--fe-woo-border, #e5e7eb) | |
| Colors → Button background | text | color-mix(in srgb, var(--fe-fav-toast-color, #111827) 7%, transparent) | A tint of the notice's own text colour, so it shows on any background. |
| Colors → Button hover | text | var(--fe-woo-accent-soft, color-mix(in srgb, var(--fe-woo-accent, #111827) 14%, transparent)) | |
| Corner radius | text | var(--fe-woo-radius, 0.75rem) |
Variables of its own
| Variable | Default | What it controls |
|---|---|---|
--fe-fav-toast-bg | var(--fe-woo-surface, #ffffff) | The notice's background. |
--fe-fav-toast-color | var(--fe-woo-color, #111827) | Its text, and the base of its buttons' tint. |
--fe-fav-toast-border | var(--fe-woo-border, #e5e7eb) | Its edge. |
--fe-fav-toast-radius | var(--fe-woo-radius, 0.75rem) | Its corners. Reads the surface radius, not the control one. |
--fe-fav-toast-button-bg | color-mix(in srgb, var(--fe-fav-toast-color, #111827) 7%, transparent) | The Undo and close buttons: a tint of the text colour, so they show on any background. |
--fe-fav-toast-hover | var(--fe-woo-accent-soft, color-mix(in srgb, var(--fe-woo-accent, #111827) 14%, transparent)) | Those buttons under the pointer. |