Norbielink’s toggle is a bare icon. No box, no border, no
background, no padding — the state is carried by whether the glyph is filled. One icon
ships in this role, the star, and it is always #F59E0B when on.
Row toggle
Starring a client or an agency. Off is an outline in the muted grey; on fills the same glyph amber. The star in the column heading is the same control used as a filter — it switches the table between all records and starred only.
Client Name
Entity
Garcia Landscaping
Corporation
Northgate Contractors
LLC
Lakeside Roofing
Sole Proprietor
Summit Electrical
Partnership
Sizes and hover
16px in a table, 20px on a record heading. Hover scales the glyph instead of drawing a background — there is nothing behind it to tint.
16px off
16px on
20px off
20px on
Specs
| Property | Value |
|---|---|
| Box | None — background: none, border: none, padding: 0 |
| Off | fill: none · stroke #9CA3AF on a row, #6B7280 in a heading |
| On | fill: #F59E0B and stroke: #F59E0B — one colour, both properties |
| Size | 16×16 in a table row or heading · 20×20 on a record title |
| Hover | transform: scale(1.15), or 1.18 on the 20px variant · no background, no colour change |
| Transition | transition-colors on the row star, transition-all where it scales |
| Hit area | The glyph itself. It sits in a flex-shrink-0 cell, and the row’s own click is stopped with stopPropagation |
Starring is not a status. #F59E0B here means “I marked this”, not “warning” — the same value does mean warning on a badge, so read it by context. |
| The same glyph is the control and the indicator. There is no separate “starred” badge on the row. |
| A toggle that needs a label is not this control — it is a switch (settings) or a filter chip (lists). A boxed, pressable toolbar button with a purple fill does not exist in the product. |
Pinning a note reuses the idea but not the control: it shows a #F59E0B pin icon with the word Pinned at 11px, as a read-only indicator in the editor footer. |