diff --git a/plugins/woocommerce-admin/client/components/order-status/README.md b/plugins/woocommerce-admin/client/components/order-status/README.md
new file mode 100644
index 00000000000..48f6d3b006f
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/order-status/README.md
@@ -0,0 +1,23 @@
+OrderStatus
+============
+
+Use `OrderStatus` to display a badge with human-friendly text describing the current order status.
+
+## How to use:
+
+```jsx
+import OrderStatus from 'components/order-status';
+
+render: function() {
+ return (
+
+ );
+}
+```
+
+## Props
+
+* `order` (required): The order to display a status for.
+* `className`: Additional CSS classes.
\ No newline at end of file
diff --git a/plugins/woocommerce-admin/client/components/order-status/index.js b/plugins/woocommerce-admin/client/components/order-status/index.js
new file mode 100644
index 00000000000..e66f2e8c2dd
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/order-status/index.js
@@ -0,0 +1,35 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const OrderStatus = ( { order, className } ) => {
+ const { status } = order;
+ const { orderStatuses } = wcSettings;
+ const classes = classnames( 'woocommerce-order-status', className );
+ const indicatorClasses = classnames( 'woocommerce-order-status__indicator', {
+ [ 'is-' + status ]: true,
+ } );
+ const label = orderStatuses[ 'wc-' + status ] || status;
+ return (
+
+
+ { label }
+
+ );
+};
+
+OrderStatus.propTypes = {
+ order: PropTypes.object.isRequired,
+ className: PropTypes.string,
+};
+
+export default OrderStatus;
diff --git a/plugins/woocommerce-admin/client/components/order-status/style.scss b/plugins/woocommerce-admin/client/components/order-status/style.scss
new file mode 100644
index 00000000000..e92bf271617
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/order-status/style.scss
@@ -0,0 +1,26 @@
+/** @format */
+
+.woocommerce-order-status {
+ display: flex;
+ align-items: center;
+}
+
+.woocommerce-order-status__indicator {
+ width: 16px;
+ height: 16px;
+ display: block;
+ background: $core-grey-light-700;
+ margin-right: $gap-smallest * 2;
+ border-radius: 50%;
+ border: 3px solid $core-grey-light-500;
+
+ &.is-processing {
+ background: $valid-green;
+ border-color: lighten($valid-green, 20%);
+ }
+
+ &.is-on-hold {
+ background: $notice-yellow;
+ border-color: lighten($notice-yellow, 20%);
+ }
+}
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
index ddd87016724..de71eab2672 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
@@ -18,6 +18,7 @@ import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency';
import { getOrderRefundTotal } from 'lib/order-values';
import Gravatar from 'components/gravatar';
import Flag from 'components/flag';
+import OrderStatus from 'components/order-status';
import { Section } from 'layout/section';
function OrdersPanel( { orders } ) {
@@ -90,7 +91,7 @@ function OrdersPanel( { orders } ) {
}
>
- Pending
+
);
} )
diff --git a/plugins/woocommerce-admin/client/stylesheets/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/_colors.scss
index 05d5671497f..58adf555885 100644
--- a/plugins/woocommerce-admin/client/stylesheets/_colors.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/_colors.scss
@@ -38,6 +38,7 @@ $black: #24292d; // same as wp-admin sidebar
// Bright colors
$valid-green: #4ab866;
+$notice-yellow: #ffb900;
$error-red: #d94f4f;
$woocommerce: #95588a;
$core-orange: #ca4a1f;
diff --git a/plugins/woocommerce-admin/lib/client-assets.php b/plugins/woocommerce-admin/lib/client-assets.php
index 6c65b95f9e5..38b3b948c46 100644
--- a/plugins/woocommerce-admin/lib/client-assets.php
+++ b/plugins/woocommerce-admin/lib/client-assets.php
@@ -43,11 +43,12 @@ function wc_admin_register_script() {
$settings = array(
'adminUrl' => admin_url(),
'embedBreadcrumbs' => wc_admin_get_embed_breadcrumbs(),
- 'siteLocale' => esc_attr( get_bloginfo( 'language' ) ),
- 'currency' => wc_admin_currency_settings(),
- 'date' => array(
+ 'siteLocale' => esc_attr( get_bloginfo( 'language' ) ),
+ 'currency' => wc_admin_currency_settings(),
+ 'date' => array(
'dow' => get_option( 'start_of_week', 0 ),
),
+ 'orderStatuses' => wc_get_order_statuses(),
);
wp_add_inline_script(