Skip to content

Commit ee0c425

Browse files
committed
docs: document subtle variant for both Button and ActionIcon
Update code_style.md to reflect that variant="subtle" is accepted for both Button and ActionIcon, not just ActionIcon. Made-with: Cursor
1 parent c7ba995 commit ee0c425

File tree

1 file changed

+3
-2
lines changed

1 file changed

+3
-2
lines changed

agent_docs/code_style.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,15 @@ The project uses Mantine UI with **custom variants** defined in `packages/app/sr
3737
| `variant="secondary"` | Secondary actions (Cancel, Clear, auxiliary actions) | `<Button variant="secondary">Cancel</Button>` |
3838
| `variant="danger"` | Destructive actions (Delete, Remove, Rotate API Key) | `<Button variant="danger">Delete</Button>` |
3939
| `variant="link"` | Link-style actions with no background or border (View Details, navigation-style CTAs) | `<Button variant="link">View Details</Button>` |
40-
| `variant="subtle"` | **ActionIcon only.** Transparent background with hover highlight; for toolbar/utility icons that shouldn't draw attention until hovered (collapse toggles, close buttons, auxiliary controls) | `<ActionIcon variant="subtle">...</ActionIcon>` |
40+
| `variant="subtle"` | Transparent background with hover highlight; for toolbar/utility controls that shouldn't draw attention until hovered (collapse toggles, close buttons, auxiliary actions) | `<Button variant="subtle">Filter</Button>` |
4141

4242
### Correct Usage
4343

4444
```tsx
4545
<Button variant="primary">Save</Button>
4646
<Button variant="secondary">Cancel</Button>
4747
<Button variant="danger">Delete</Button>
48+
<Button variant="subtle">Filter</Button>
4849
<Button variant="link">View Details</Button>
4950
<ActionIcon variant="primary">...</ActionIcon>
5051
<ActionIcon variant="secondary">...</ActionIcon>
@@ -70,7 +71,7 @@ The project uses Mantine UI with **custom variants** defined in `packages/app/sr
7071

7172
**Link variant details**: Renders with no background, no border, and muted text color. On hover, text brightens to full contrast. Use for link-style CTAs that should blend into surrounding content (e.g., "View Details", "View Full Trace").
7273

73-
**Subtle variant details (ActionIcon only)**: Transparent background with standard text color. On hover, a subtle background highlight appears (`--color-bg-hover`). This is the **default** ActionIcon variant. Use for toolbar icons, collapse toggles, close buttons, and utility controls that should stay unobtrusive but reveal interactivity on hover. Unlike `link`, `subtle` shows a hover background rather than changing text color.
74+
**Subtle variant details**: Transparent background with standard text color. On hover, a subtle background highlight appears (`--color-bg-hover`). This is the **default** ActionIcon variant. Use for toolbar icons, collapse toggles, close buttons, and utility controls that should stay unobtrusive but reveal interactivity on hover. Unlike `link`, `subtle` shows a hover background rather than changing text color.
7475

7576
**Note**: `variant="filled"` is still valid for **form inputs** (Select, TextInput, etc.), just not for Button/ActionIcon.
7677

0 commit comments

Comments
 (0)