diff --git a/packages/core/src/components/WarningPanel/WarningPanel.js b/packages/core/src/components/WarningPanel/WarningPanel.js
new file mode 100644
index 0000000000..679f7511d8
--- /dev/null
+++ b/packages/core/src/components/WarningPanel/WarningPanel.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Typography, withStyles } from '@material-ui/core';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+
+const errorOutlineStyles = theme => ({
+ root: {
+ marginRight: theme.spacing(1),
+ fill: theme.palette.warningText,
+ },
+});
+const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline);
+
+const styles = theme => ({
+ message: {
+ display: 'flex',
+ flexDirection: 'column',
+ padding: theme.spacing(1.5),
+ backgroundColor: theme.palette.warningBackground,
+ color: theme.palette.warningText,
+ verticalAlign: 'middle',
+ },
+ header: {
+ display: 'flex',
+ flexDirection: 'row',
+ marginBottom: theme.spacing(1),
+ },
+ headerText: {
+ color: theme.palette.warningText,
+ },
+ messageText: {
+ color: theme.palette.warningText,
+ },
+});
+
+/**
+ * WarningPanel. Show a user friendly error message to a user similar to ErrorPanel except that the warning panel
+ * only shows the warning message to the user
+ */
+class WarningPanel extends Component {
+ static propTypes = {
+ message: PropTypes.node.isRequired,
+ };
+
+ render() {
+ const { classes, title, message, children } = this.props;
+ return (
+
+
+
+
+ {title}
+
+
+ {message && (
+ {message}
+ )}
+ {children}
+
+ );
+ }
+}
+
+export default withStyles(styles)(WarningPanel);
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx b/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx
new file mode 100644
index 0000000000..2fd5395db5
--- /dev/null
+++ b/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import WarningPanel from '.';
+import { Link, Button } from '@material-ui/core';
+
+export default {
+ title: 'Warning Panel',
+ component: WarningPanel,
+};
+
+export const Default = () => (
+
+ This example entity is missing something. If this is unexpected, please
+ make sure you have set up everything correctly by following{' '}
+ this guide.
+ >
+ }
+ />
+);
+
+export const Children = () => (
+
+
+
+);
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.test.js b/packages/core/src/components/WarningPanel/WarningPanel.test.js
new file mode 100644
index 0000000000..4094c65a1f
--- /dev/null
+++ b/packages/core/src/components/WarningPanel/WarningPanel.test.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { wrapInThemedTestApp } from '@backstage/test-utils';
+
+import WarningPanel from './WarningPanel';
+
+const minProps = { title: 'Mock title', message: 'Some more info' };
+
+describe('', () => {
+ it('renders without exploding', () => {
+ const { getByText } = render(
+ wrapInThemedTestApp(),
+ );
+ expect(getByText('Mock title')).toBeInTheDocument();
+ });
+
+ it('renders message and children', () => {
+ const { getByText } = render(
+ wrapInThemedTestApp(children),
+ );
+ expect(getByText('Some more info')).toBeInTheDocument();
+ expect(getByText('children')).toBeInTheDocument();
+ });
+});
diff --git a/packages/core/src/components/WarningPanel/index.js b/packages/core/src/components/WarningPanel/index.js
new file mode 100644
index 0000000000..704453fb47
--- /dev/null
+++ b/packages/core/src/components/WarningPanel/index.js
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default } from './WarningPanel';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 740a4cc803..9153b9fa3b 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -33,3 +33,4 @@ export { default as SupportButton } from './components/SupportButton';
export { default as SortableTable } from './components/SortableTable';
export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular';
export * from './components/Status';
+export { default as WarningPanel } from './components/WarningPanel';