Toggle
Pin Rotate
A list row with a pin button: the icon rotates 45° instead of changing colour, and the whole row's background lights up through data-pinned on the root.
What you can change
- the row title through title
- the note text in the default state through note
- the initial state through defaultPressed
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/toggle-014?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
One file, zero dependencies, the --vibeui-toggle-014-* palette. Client-side: useState. The pin icon rotates 45deg through transform in the rule button[aria-pressed="true"] svg — a rotation reads without perceiving colour, unlike a fill alone. The background and the border of the whole row change through data-pinned on the root, so a pinned item is noticeable even in peripheral vision, not only by the button. The second line of text is replaced by the status "Pinned to the top of the list" through role="status". The palette is on light-dark(): the component follows the surrounding color-scheme. The row background is transparent by default, and the background prop sets it explicitly.
Tags
- toggle
- pin
- rotate
- aria-pressed
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…