You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`variant="danger"`| Destructive actions (Delete, Remove, Rotate API Key) |`<Button variant="danger">Delete</Button>`|
39
39
|`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>`|
41
41
42
42
### Correct Usage
43
43
44
44
```tsx
45
45
<Buttonvariant="primary">Save</Button>
46
46
<Buttonvariant="secondary">Cancel</Button>
47
47
<Buttonvariant="danger">Delete</Button>
48
+
<Buttonvariant="subtle">Filter</Button>
48
49
<Buttonvariant="link">View Details</Button>
49
50
<ActionIconvariant="primary">...</ActionIcon>
50
51
<ActionIconvariant="secondary">...</ActionIcon>
@@ -70,7 +71,7 @@ The project uses Mantine UI with **custom variants** defined in `packages/app/sr
70
71
71
72
**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").
72
73
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.
74
75
75
76
**Note**: `variant="filled"` is still valid for **form inputs** (Select, TextInput, etc.), just not for Button/ActionIcon.
0 commit comments