Skip to content

feat(icons): update close icons to use the rh micron #12283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 5 commits into from
Mar 31, 2026
Merged

feat(icons): update close icons to use the rh micron #12283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bee3478
feat(icons): update close icons to use the rh micron
wise-king-sullyman Mar 20, 2026
7e43c3b
Update x icons in button and action list examples
wise-king-sullyman Mar 31, 2026
c1406fb
Merge branch 'main' into update-close-icons-to-rh-microns
wise-king-sullyman Mar 31, 2026
35c8cc1
Update snapshots for tests
wise-king-sullyman Mar 31, 2026
4d9fa38
Update snapshots
wise-king-sullyman Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
import { Button } from '../Button';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
/** A callback for when the close button is clicked */
Expand All @@ -16,7 +16,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
...props
}: AboutModalBoxCloseButtonProps) => (
<div className={css(styles.aboutModalBoxClose)} {...props}>
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
</div>
);
AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';
60 changes: 12 additions & 48 deletions .../src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,12 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
/>
</svg>
<path
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
/>
</svg>
</span>
</button>
Expand Down Expand Up @@ -69,24 +57,12 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
/>
</svg>
<path
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
/>
</svg>
</span>
</button>
Expand Down Expand Up @@ -116,24 +92,12 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
/>
</svg>
<path
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
/>
</svg>
</span>
</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/ActionList/examples/ActionList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
---

import { Fragment, useState } from 'react';
import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/ActionList/examples/ActionListVertical.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

export const ActionListVertical: React.FunctionComponent = () => (
<>
Expand All @@ -27,15 +27,15 @@ export const ActionListVertical: React.FunctionComponent = () => (
<ActionList isVertical>
<ActionListGroup>
<ActionListItem>
<Button aria-label="Close vertical action list group 1" variant="plain" icon={<TimesIcon />} />
<Button aria-label="Close vertical action list group 1" variant="plain" icon={<RhMicronsCloseIcon />} />
</ActionListItem>
<ActionListItem>
<Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
</ActionListItem>
</ActionListGroup>
<ActionListGroup>
<ActionListItem>
<Button aria-label="Close vertical action list group 2" variant="plain" icon={<TimesIcon />} />
<Button aria-label="Close vertical action list group 2" variant="plain" icon={<RhMicronsCloseIcon />} />
</ActionListItem>
<ActionListItem>
<Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />
Expand Down
13 changes: 9 additions & 4 deletions packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';

export const ActionListWithIcons: React.FunctionComponent = () => (
<>
<h4>With list icons wrapper</h4>
<ActionList isIconList>
<ActionListItem>
<Button variant="plain" id="with-icons-times-button" aria-label="times icon button" icon={<TimesIcon />} />
<Button
variant="plain"
id="with-icons-times-button"
aria-label="times icon button"
icon={<RhMicronsCloseIcon />}
/>
</ActionListItem>
<ActionListItem>
<Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
Expand All @@ -22,7 +27,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
variant="plain"
id="with-icons-list-times-button"
aria-label="times icon button"
icon={<TimesIcon />}
icon={<RhMicronsCloseIcon />}
/>
</ActionListItem>
<ActionListItem>
Expand All @@ -40,7 +45,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
variant="plain"
id="with-icons-group-times-button"
aria-label="times icon button"
icon={<TimesIcon />}
icon={<RhMicronsCloseIcon />}
/>
</ActionListItem>
<ActionListItem>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRef, useContext } from 'react';
import { Button, ButtonVariant, ButtonProps } from '../Button';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import { AlertContext } from './AlertContext';
import { AlertGroupContext } from './AlertGroupContext';
import alertGroupStyles from '@patternfly/react-styles/css/components/Alert/alert-group';
Expand Down Expand Up @@ -50,7 +50,7 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
onClick={handleOnClick}
aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
className={className}
icon={<TimesIcon />}
icon={<RhMicronsCloseIcon />}
{...props}
/>
)}
Expand Down
20 changes: 4 additions & 16 deletions ...c/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,12 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
/>
</svg>
<path
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
/>
</svg>
</span>
</button>
Expand Down
20 changes: 4 additions & 16 deletions ...ct-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,12 @@ exports[`Matches the snapshot 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
/>
</svg>
<path
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
/>
</svg>
</div>
</DocumentFragment>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Button/examples/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ ouia: true
---

import { Fragment, useState } from 'react';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Button/examples/ButtonCircle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, Flex } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
Expand Down Expand Up @@ -34,7 +34,7 @@ export const ButtonCircle: React.FunctionComponent = () => {
<Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
<Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
<Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
<Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
<Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
<Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
<Button
variant="stateful"
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, Flex } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

Expand Down Expand Up @@ -34,7 +34,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
<Button variant="link" isDanger isDisabled>
Danger link
</Button>
<Button isDisabled variant="plain" aria-label="Action" icon={<TimesIcon />} />
<Button isDisabled variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
</Flex>
<br />
<Flex columnGap={{ default: 'columnGapSm' }}>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Button/examples/ButtonVariations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, Flex } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
Expand Down Expand Up @@ -41,7 +41,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
<Button variant="link" isDanger>
Danger link
</Button>
<Button variant="plain" aria-label="Action" icon={<TimesIcon />} />
<Button variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
</Flex>
<br />
<Flex columnGap={{ default: 'columnGapSm' }}>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
import { css } from '@patternfly/react-styles';
import { Button } from '../Button';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
/** Additional classes added to the drawer close button outer <div>. */
Expand All @@ -19,7 +19,7 @@ export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps>
...props
}: DrawerCloseButtonProps) => (
<div className={css(styles.drawerClose, className)} {...props}>
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
</div>
);
DrawerCloseButton.displayName = 'DrawerCloseButton';
Loading
Loading