diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css
deleted file mode 100644
index 926df0f82..000000000
--- a/src/alert/alert.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.container {
-    border-style: solid;
-    border-width: 1px;
-    color: var(--reactist-content-primary);
-    padding: var(--reactist-spacing-small);
-}
-
-.content {
-    /* this is to make sure it always has the same minimum height, whether it has a close button or not */
-    min-height: var(--reactist-button-small-height);
-}
-
-.icon {
-    display: block;
-}
-
-.tone-info {
-    background-color: var(--reactist-alert-tone-info-background);
-    border-color: var(--reactist-alert-tone-info-border);
-}
-.tone-info .icon {
-    color: var(--reactist-alert-tone-info-icon);
-}
-
-.tone-positive {
-    background-color: var(--reactist-alert-tone-positive-background);
-    border-color: var(--reactist-alert-tone-positive-border);
-}
-.tone-positive .icon {
-    color: var(--reactist-alert-tone-positive-icon);
-}
-
-.tone-caution {
-    background-color: var(--reactist-alert-tone-caution-background);
-    border-color: var(--reactist-alert-tone-caution-border);
-}
-.tone-caution .icon {
-    color: var(--reactist-alert-tone-caution-icon);
-}
-
-.tone-critical {
-    background-color: var(--reactist-alert-tone-critical-background);
-    border-color: var(--reactist-alert-tone-critical-border);
-}
-.tone-critical .icon {
-    color: var(--reactist-alert-tone-critical-icon);
-}
diff --git a/src/alert/alert.stories.mdx b/src/alert/alert.stories.mdx
deleted file mode 100644
index 76f020e0e..000000000
--- a/src/alert/alert.stories.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
-import { Box } from '../box'
-import { Text } from '../text'
-import { Stack } from '../stack'
-import { Alert } from './alert'
-
-<Meta
-    title="Design system/Alert"
-    component={Alert}
-    parameters={{
-        badges: ['accessible'],
-    }}
-/>
-
-export function getContent(content) {
-    return content === 'long' ? (
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non gravida lacus. Sed sit amet congue diam, ac ultrices elit.'
-    ) : content === 'short' ? (
-        'Lorem ipsum dolor sit amet.'
-    ) : (
-        <Stack space="medium">
-            <Text>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non gravida lacus.
-                Sed sit amet congue diam, ac ultrices elit.
-            </Text>
-            <Text>
-                Suspendisse at neque leo. Duis facilisis nulla non lectus malesuada, vitae
-                scelerisque massa hendrerit. Nulla lacinia luctus risus, dapibus semper turpis
-                vestibulum eu.
-            </Text>
-        </Stack>
-    )
-}
-
-# Alert
-
-export function AlertWrapper({ tone, content }) {
-    return (
-        <Alert tone={tone} closeLabel="Close" onClose={() => undefined}>
-            {getContent(content)}
-        </Alert>
-    )
-}
-
-A simple Alert component.
-
-<Canvas>
-    <Story
-        name="Main demo"
-        parameters={{
-            docs: { source: { type: 'code' } },
-            chromatic: { disableSnapshot: false },
-        }}
-    >
-        <Stack space="xxlarge">
-            <Stack space="large">
-                {['info', 'positive', 'caution', 'critical'].map((tone) => (
-                    <AlertWrapper tone={tone} content="longer" />
-                ))}
-            </Stack>
-        </Stack>
-    </Story>
-</Canvas>
-
-## Playground
-
-export function Template({ tone, content, closeLabel }) {
-    const text = getContent(content)
-    return (
-        <Stack space="large" maxWidth="medium">
-            <Alert tone={tone}>{text}</Alert>
-            <Alert tone={tone} closeLabel={closeLabel} onClose={() => undefined}>
-                {text}
-            </Alert>
-        </Stack>
-    )
-}
-
-<Canvas>
-    <Story
-        name="Playground"
-        parameters={{ docs: { source: { type: 'code' } } }}
-        argTypes={{
-            content: {
-                control: { type: 'inline-radio' },
-                options: ['short', 'long', 'longer'],
-                defaultValue: 'short',
-            },
-            tone: {
-                options: ['info', 'positive', 'caution', 'critical'],
-                control: { type: 'inline-radio' },
-                defaultValue: 'info',
-            },
-            closeLabel: {
-                control: { type: 'text' },
-                defaultValue: 'Close',
-            },
-            id: { control: false },
-            onClose: { control: false },
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
----
-
-<Description of={Alert} />
-<ArgsTable of={Alert} />
diff --git a/src/alert/alert.test.tsx b/src/alert/alert.test.tsx
deleted file mode 100644
index de48fd0e2..000000000
--- a/src/alert/alert.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { axe } from 'jest-axe'
-import { Alert, AlertProps } from './alert'
-
-describe('Alert', () => {
-    it('allows to be dismissed', () => {
-        function Example(props: Omit<AlertProps, 'closeLabel' | 'onClose'>) {
-            const [show, setShow] = React.useState(true)
-            return show ? (
-                <Alert {...props} closeLabel="Close alert" onClose={() => setShow(false)} />
-            ) : null
-        }
-        render(<Example tone="info">Info message</Example>)
-        expect(screen.getByRole('alert')).toHaveTextContent('Info message')
-        userEvent.click(screen.getByRole('button', { name: 'Close alert' }))
-        expect(screen.queryByRole('alert')).not.toBeInTheDocument()
-    })
-
-    it('renders with no a11y violations', async () => {
-        const { container } = render(
-            <>
-                <Alert tone="info">Info message</Alert>
-                <Alert tone="info" closeLabel="Close" onClose={() => undefined}>
-                    Another info message
-                </Alert>
-            </>,
-        )
-        const results = await axe(container)
-        expect(results).toHaveNoViolations()
-    })
-})
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
deleted file mode 100644
index bce2f8fc3..000000000
--- a/src/alert/alert.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import { getClassNames } from '../utils/responsive-props'
-import { Box } from '../box'
-import { IconButton } from '../button'
-import { Columns, Column } from '../columns'
-
-import { AlertIcon } from '../icons/alert-icon'
-import { CloseIcon } from '../icons/close-icon'
-
-import styles from './alert.module.css'
-
-import type { AlertTone } from '../utils/common-types'
-
-type AllOrNone<T> = T | { [K in keyof T]?: never }
-
-type AlertCloseProps = AllOrNone<{
-    closeLabel: string
-    onClose: () => void
-}>
-
-type AlertProps = {
-    id?: string
-    children: React.ReactNode
-    tone: AlertTone
-} & AlertCloseProps
-
-function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
-    return (
-        <Box
-            id={id}
-            role="alert"
-            aria-live="polite"
-            borderRadius="full"
-            className={[styles.container, getClassNames(styles, 'tone', tone)]}
-        >
-            <Columns space="small" alignY="center">
-                <Column width="content">
-                    <AlertIcon tone={tone} className={styles.icon} />
-                </Column>
-                <Column>
-                    <Box
-                        paddingY="xsmall"
-                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}
-                        display="flex"
-                        alignItems="center"
-                        className={styles.content}
-                    >
-                        {children}
-                    </Box>
-                </Column>
-                {onClose != null && closeLabel != null ? (
-                    <Column width="content">
-                        <IconButton
-                            variant="quaternary"
-                            size="small"
-                            onClick={onClose}
-                            aria-label={closeLabel}
-                            icon={<CloseIcon />}
-                            style={{
-                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties
-                                '--reactist-btn-hover-fill': 'transparent',
-                            }}
-                        />
-                    </Column>
-                ) : null}
-            </Columns>
-        </Box>
-    )
-}
-
-export { Alert }
-export type { AlertProps }
diff --git a/src/alert/index.ts b/src/alert/index.ts
deleted file mode 100644
index 17dc897db..000000000
--- a/src/alert/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './alert'
diff --git a/src/index.ts b/src/index.ts
index f6b8fe9b6..00234a048 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,7 +10,6 @@ export * from './hidden'
 export * from './hidden-visually'
 
 // alerts, notifications, etc.
-export * from './alert'
 export * from './banner'
 export * from './loading'
 export * from './notice'
diff --git a/stories/components/Dropdown.stories.tsx b/stories/components/Dropdown.stories.tsx
index 03345c21c..70040de42 100644
--- a/stories/components/Dropdown.stories.tsx
+++ b/stories/components/Dropdown.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import Button from '../../src/components/deprecated-button'
 import Dropdown from '../../src/components/deprecated-dropdown'
-import { Alert } from '../../src/alert'
+import { Banner } from '../../src/banner'
 import { Stack } from '../../src/stack'
 import LinkTo from '@storybook/addon-links/react'
 
@@ -18,10 +18,15 @@ export default {
 export const DropdownStory = () => (
     <section className="story">
         <Stack as="section" exceptionallySetClassName="story" space="large">
-            <Alert tone="critical">
-                <strong>Deprecated:</strong> While not a 1:1 replacement, consider using{' '}
-                <LinkTo kind="design-system-menu">Menu</LinkTo> as an alternative
-            </Alert>
+            <Banner
+                tone="error"
+                description={
+                    <>
+                        <strong>Deprecated:</strong> While not a 1:1 replacement, consider using{' '}
+                        <LinkTo kind="design-system-menu">Menu</LinkTo> as an alternative
+                    </>
+                }
+            />
 
             <Dropdown.Box>
                 <Dropdown.Trigger>
diff --git a/stories/components/Input.stories.tsx b/stories/components/Input.stories.tsx
index 0e8f32db3..2964450df 100644
--- a/stories/components/Input.stories.tsx
+++ b/stories/components/Input.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import Input from '../../src/components/deprecated-input'
-import { Alert } from '../../src/alert'
+import { Banner } from '../../src/banner'
 import './styles/input_story.less'
 import LinkTo from '@storybook/addon-links/react'
 
@@ -20,10 +20,15 @@ export default {
 export const InputStory = () => (
     <section className="story">
         <div className="story-info">
-            <Alert tone="critical">
-                <strong>Deprecated:</strong> Please use{' '}
-                <LinkTo kind="design-system-textfield">TextField</LinkTo> instead
-            </Alert>
+            <Banner
+                tone="error"
+                description={
+                    <>
+                        <strong>Deprecated:</strong> Please use{' '}
+                        <LinkTo kind="design-system-textfield">TextField</LinkTo> instead
+                    </>
+                }
+            />
             <p>
                 This component is a dumb wrapper around the
                 <code> &lt;input /&gt;</code> element which justs add a class name to give it is
diff --git a/stories/components/Select.stories.tsx b/stories/components/Select.stories.tsx
index e35217a72..b552fc4f0 100644
--- a/stories/components/Select.stories.tsx
+++ b/stories/components/Select.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import Select from '../../src/components/deprecated-select'
-import { Alert } from '../../src/alert'
+import { Banner } from '../../src/banner'
 import { Stack } from '../../src/stack'
 import LinkTo from '@storybook/addon-links/react'
 
@@ -31,10 +31,15 @@ export function SelectStory() {
 
     return (
         <Stack as="section" exceptionallySetClassName="story" space="large">
-            <Alert tone="critical">
-                <strong>Deprecated:</strong> Please use{' '}
-                <LinkTo kind="design-system-selectfield">SelectField</LinkTo> instead
-            </Alert>
+            <Banner
+                tone="error"
+                description={
+                    <>
+                        <strong>Deprecated:</strong> Please use{' '}
+                        <LinkTo kind="design-system-selectfield">SelectField</LinkTo> instead
+                    </>
+                }
+            />
 
             <Select value={value} options={options} onChange={setValue} />
         </Stack>