Replace Button with Anchor in NotificationInline

sumup-oss · Nov 30, 2023 · 338faf8 · 338faf8
1 parent 7f8a2b2
commit 338faf8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 20 deletions.
diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.module.css b/packages/circuit-ui/components/NotificationInline/NotificationInline.module.css
@@ -64,21 +64,8 @@
   padding-left: var(--cui-spacings-mega);
 }
 
-.base .button {
+.base .action {
   margin-top: var(--cui-spacings-byte);
-  font-weight: bold;
-  color: var(--cui-fg-normal);
-  text-decoration-line: underline;
-}
-
-.base .button:hover {
-  color: var(--cui-fg-normal-hovered);
-}
-
-.base .button:active,
-.base .button[aria-expanded="true"],
-.base .button[aria-pressed="true"] {
-  color: var(--cui-fg-normal-pressed);
 }
 
 .base .close {

diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx
@@ -27,7 +27,7 @@ import {
 import { useAnimation } from '../../hooks/useAnimation/index.js';
 import Body from '../Body/index.js';
 import CloseButton from '../CloseButton/index.js';
-import Button, { ButtonProps } from '../Button/index.js';
+import Anchor, { AnchorProps } from '../Anchor/index.js';
 import { ClickEvent } from '../../types/events.js';
 import { isString } from '../../util/type-check.js';
 import {
@@ -43,7 +43,7 @@ import classes from './NotificationInline.module.css';
 const TRANSITION_DURATION = 200;
 const DEFAULT_HEIGHT = 'auto';
 
-type Action = ButtonProps;
+type Action = AnchorProps;
 
 type CloseProps =
   | {
@@ -170,11 +170,10 @@ export const NotificationInline = forwardRef<
             )}
             <Body>{body}</Body>
             {action && (
-              <Button
+              <Anchor
                 {...action}
-                className={classes.button}
-                variant="tertiary"
-                size="s"
+                className={classes.action}
+                variant="highlight"
               />
             )}
           </div>