diff --git a/src/App.vue b/src/App.vue
index cd07ecc54..85ff76a9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,6 +61,9 @@
 				<template slot="heading">
 					Components
 				</template>
+				<li>
+					<router-link to="/component/ActionPanel">ActionPanel</router-link>
+				</li>
 				<li><router-link to="/component/Badge">Badge</router-link></li>
 				<li><router-link to="/component/Button">Button</router-link></li>
 				<li><router-link to="/component/Chart">Chart</router-link></li>
diff --git a/src/components/ActionPanel/ActionPanel.vue b/src/components/ActionPanel/ActionPanel.vue
new file mode 100644
index 000000000..0f37e3b0e
--- /dev/null
+++ b/src/components/ActionPanel/ActionPanel.vue
@@ -0,0 +1,66 @@
+<template>
+	<div class="actionPanel">
+		<div class="actionPanel__text">
+			<slot />
+		</div>
+		<div class="actionPanel__actions">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.actionPanel__text {
+	font-size: @font-sml;
+	line-height: @line-sml;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin: 0;
+		font-size: @font-base-larger;
+		line-height: @line-base;
+	}
+
+	p {
+		margin-top: 0.25rem;
+	}
+}
+
+.actionPanel__actions {
+	.pkpButton {
+		display: block;
+		width: 100%;
+
+		+ .pkpButton {
+			margin-top: 0.25rem;
+		}
+	}
+}
+
+@media (min-width: 767px) {
+	.actionPanel {
+		display: grid;
+		grid-template-columns: 1fr 15rem;
+	}
+
+	.actionPanel__text {
+		margin-right: 1rem;
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.actionPanel__actions {
+		justify-self: center;
+		align-self: center;
+		width: 100%;
+	}
+}
+</style>
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 556b48f6a..019da34fa 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -67,6 +67,7 @@ export default {
 	background: #fff;
 	border: @bg-border-light;
 	border-radius: @radius;
+	text-align: center;
 	font-size: @font-sml;
 	line-height: 2rem;
 	font-weight: @bold;
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 9e4cad532..4c281eb05 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -217,6 +217,7 @@
 						:closeLabel="__('common.close')"
 						:name="fileAttacherModalId"
 						:title="attachFilesLabel"
+						@closed="resetFocusAfterAttachment"
 					>
 						<file-attacher
 							:attachers="attachers"
@@ -628,7 +629,8 @@ export default {
 		},
 
 		/**
-		 * The icon to match this document type
+		 * Get the icon to match this document type,
+		 * such as PDF, Word, spreadsheet, etc.
 		 *
 		 * @return {String}
 		 */
@@ -658,7 +660,7 @@ export default {
 		},
 
 		/**
-		 * Load message from a template
+		 * Load an email template and update the subject/body
 		 */
 		loadTemplate(key) {
 			this.isLoadingTemplate = true;
@@ -742,7 +744,7 @@ export default {
 		},
 
 		/**
-		 * Remove an attachment
+		 * Remove a file attachment
 		 */
 		removeAttachment(index) {
 			this.emitChange({
@@ -750,6 +752,13 @@ export default {
 			});
 		},
 
+		/**
+		 * Reset the focus when the attachment modal is closed
+		 */
+		resetFocusAfterAttachment() {
+			this.$refs.attachFiles.$el.focus();
+		},
+
 		/**
 		 * Search for email templates
 		 */
diff --git a/src/components/Container/AdminPage.vue b/src/components/Container/AdminPage.vue
index 0ea6b3c96..e8fea5035 100644
--- a/src/components/Container/AdminPage.vue
+++ b/src/components/Container/AdminPage.vue
@@ -1,11 +1,13 @@
 <script type="text/javascript">
 import Page from '@/components/Container/Page.vue';
 import ThemeForm from '@/components/Form/context/ThemeForm.vue';
+import ActionPanel from '../ActionPanel/ActionPanel.vue';
 
 export default {
 	extends: Page,
 	name: 'AdminPage',
 	components: {
+		ActionPanel,
 		ThemeForm
 	}
 };
@@ -19,6 +21,19 @@ export default {
 		margin-bottom: 2rem;
 	}
 
+	.actionPanel {
+		margin-bottom: 1.5rem;
+		padding: 1rem;
+		border: @bg-border-light;
+		border-radius: @radius;
+		background: @lift;
+	}
+
+	// Account for <form> wrappers around some actions
+	.actionPanel__actions form + form {
+		margin-top: 0.25rem;
+	}
+
 	.app__contentPanel {
 		font-size: @font-sml;
 		line-height: 1.6em;
@@ -33,24 +48,6 @@ export default {
 			margin-top: 0;
 		}
 
-		h3 {
-			margin-bottom: 0.5rem;
-		}
-
-		ul {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-		}
-
-		li {
-			padding: 0.25em 0;
-		}
-
-		ul + h2 {
-			margin-top: 1rem;
-		}
-
 		.app--admin__systemInfoGroup {
 			font-weight: @bold;
 		}
diff --git a/src/components/FileAttacher/FileAttacher.vue b/src/components/FileAttacher/FileAttacher.vue
index c243b2a55..3d331dd85 100644
--- a/src/components/FileAttacher/FileAttacher.vue
+++ b/src/components/FileAttacher/FileAttacher.vue
@@ -1,40 +1,55 @@
 <template>
 	<div class="fileAttacher">
-		<panel v-if="!currentAttacher">
-			<panel-section v-for="(attacher, key) in attachers" :key="key">
-				<template slot="header">
-					<h2>{{ attacher.label }}</h2>
-					<p v-html="attacher.description" />
-				</template>
-				<pkp-button @click="setAttacher(attacher.component)">
+		<action-panel
+			v-for="(attacher, key) in attachers"
+			:key="key"
+			:id="'attacher' + key"
+		>
+			<h2>{{ attacher.label }}</h2>
+			<p v-html="attacher.description" />
+			<template slot="actions">
+				<pkp-button
+					:aria-describedby="'attacher' + key"
+					@click="setAttacher(attacher)"
+				>
 					{{ attacher.button }}
 				</pkp-button>
-			</panel-section>
-		</panel>
-		<component
-			v-else
-			:is="currentAttacher.component"
-			v-bind="currentAttacher"
-			ref="attacher"
-			@selected:files="attachFiles"
-			@cancel="cancel"
-		/>
+			</template>
+		</action-panel>
+		<modal
+			:closeLabel="__('common.close')"
+			name="attacher"
+			:title="currentAttacher ? currentAttacher.label : ''"
+			@closed="resetFocus"
+		>
+			<component
+				v-if="currentAttacher"
+				:is="currentAttacher.component"
+				v-bind="currentAttacher"
+				@selected:files="attachFiles"
+				@cancel="cancel"
+			/>
+		</modal>
 	</div>
 </template>
 
 <script>
+import ActionPanel from '../ActionPanel/ActionPanel.vue';
 import FileAttacherFileStage from './FileAttacherFileStage.vue';
 import FileAttacherLibrary from './FileAttacherLibrary.vue';
 import FileAttacherReviewFiles from './FileAttacherReviewFiles.vue';
 import FileAttacherUpload from './FileAttacherUpload.vue';
+import Modal from '../Modal/Modal.vue';
 
 export default {
 	name: 'FileAttacher',
 	components: {
+		ActionPanel,
 		FileAttacherFileStage,
 		FileAttacherLibrary,
 		FileAttacherReviewFiles,
-		FileAttacherUpload
+		FileAttacherUpload,
+		Modal
 	},
 	props: {
 		attachers: {
@@ -44,21 +59,28 @@ export default {
 	},
 	data() {
 		return {
-			currentAttacher: null
+			currentAttacher: null,
+			resetFocusTo: null
 		};
 	},
 	methods: {
 		attachFiles(files) {
 			this.$emit('attached:files', this.currentAttacher.component, files);
+			this.$modal.hide('attacher');
 		},
 		cancel() {
-			this.currentAttacher = null;
+			this.$modal.hide('attacher');
+			this.$nextTick(() => (this.currentAttacher = null));
 		},
-		setAttacher(component) {
-			this.currentAttacher = this.attachers.find(
-				attacher => attacher.component === component
-			);
-			this.setFocusToRef('attacher');
+		resetFocus() {
+			if (this.resetFocusTo) {
+				this.resetFocusTo.focus();
+			}
+		},
+		setAttacher(attacher) {
+			this.currentAttacher = attacher;
+			this.resetFocusTo = document.activeElement;
+			this.$modal.show('attacher');
 		}
 	}
 };
@@ -67,8 +89,20 @@ export default {
 <style lang="less">
 @import '../../styles/_import';
 
+.fileAttacher .actionPanel:not(:last-child) {
+	margin-bottom: 2rem;
+}
+
 .fileAttacher__footer {
 	display: flex;
 	padding-top: 1rem;
+
+	.pkpButton + .pkpButton {
+		margin-left: 0.25rem;
+	}
+}
+
+.fileAttacher__back {
+	margin-right: auto;
 }
 </style>
diff --git a/src/components/FileAttacher/FileAttacherFileStage.vue b/src/components/FileAttacher/FileAttacherFileStage.vue
index f61afb1c6..831efa64f 100644
--- a/src/components/FileAttacher/FileAttacherFileStage.vue
+++ b/src/components/FileAttacher/FileAttacherFileStage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="fileAttacherFileStage" aria-live="polite">
-		<list-panel :items="items" :isLoading="isLoading">
+		<list-panel :items="files" :isLoading="isLoading">
 			<pkp-header slot="header">
 				<h2>{{ currentFileStage.label }}</h2>
 				<template slot="actions">
@@ -37,10 +37,14 @@
 			</template>
 		</list-panel>
 		<div class="fileAttacher__footer">
-			<button class="fileAttacher__back -linkButton" @click="$emit('cancel')">
+			<pkp-button
+				class="fileAttacher__back"
+				:is-link="true"
+				@click="$emit('cancel')"
+			>
 				<icon icon="long-arrow-left" :inline="true" />
 				{{ backLabel }}
-			</button>
+			</pkp-button>
 			<pkp-button
 				:isDisabled="!selected.length"
 				@click="$emit('selected:files', selectedFiles)"
@@ -97,26 +101,26 @@ export default {
 		return {
 			currentFileStage: {},
 			isLoading: false,
-			items: [],
+			files: [],
 			selected: []
 		};
 	},
 	computed: {
 		selectedFiles() {
-			return this.items.filter(item => this.selected.includes(item.id));
+			return this.files.filter(item => this.selected.includes(item.id));
 		}
 	},
 	methods: {
 		getFiles() {
 			let self = this;
 			this.isLoading = true;
-			this.items = [];
+			this.files = [];
 			$.ajax({
 				url: this.submissionFilesApiUrl,
 				type: 'GET',
 				data: this.currentFileStage.queryParams,
 				success(r) {
-					self.items = r.items;
+					self.files = r.items;
 				},
 				error: this.ajaxErrorCallback,
 				complete(r) {
diff --git a/src/components/FileAttacher/FileAttacherLibrary.vue b/src/components/FileAttacher/FileAttacherLibrary.vue
index 6f6e0b26c..eb6ea0abd 100644
--- a/src/components/FileAttacher/FileAttacherLibrary.vue
+++ b/src/components/FileAttacher/FileAttacherLibrary.vue
@@ -24,10 +24,14 @@
 			</select-submission-file-list-item>
 		</div>
 		<div class="fileAttacher__footer">
-			<button class="fileAttacher__back -linkButton" @click="$emit('cancel')">
+			<pkp-button
+				class="fileAttacher__back"
+				:is-link="true"
+				@click="$emit('cancel')"
+			>
 				<icon icon="long-arrow-left" :inline="true" />
 				{{ backLabel }}
-			</button>
+			</pkp-button>
 			<pkp-button
 				:isDisabled="!selected.length"
 				@click="$emit('selected:files', selectedFiles)"
@@ -130,4 +134,8 @@ export default {
 	min-height: 4rem;
 	font-size: @font-sml;
 }
+
+.fileAttacherLibrary .selectSubmissionFileListItem {
+	padding: 0.75rem 0.5rem 0.75rem 1rem;
+}
 </style>
diff --git a/src/components/FileAttacher/FileAttacherReviewFiles.vue b/src/components/FileAttacher/FileAttacherReviewFiles.vue
index d9b5403d3..3a88071b5 100644
--- a/src/components/FileAttacher/FileAttacherReviewFiles.vue
+++ b/src/components/FileAttacher/FileAttacherReviewFiles.vue
@@ -3,7 +3,7 @@
 		<div v-if="!files.length" class="fileAttacherReviewFiles__noFiles">
 			{{ __('common.noItemsFound') }}
 		</div>
-		<div v-else>
+		<template v-else>
 			<select-submission-file-list-item
 				v-for="(file, i) in files"
 				:key="i"
@@ -16,12 +16,16 @@
 			>
 				<input type="checkbox" :value="file.id" v-model="selected" />
 			</select-submission-file-list-item>
-		</div>
+		</template>
 		<div class="fileAttacher__footer">
-			<button class="fileAttacher__back -linkButton" @click="$emit('cancel')">
+			<pkp-button
+				class="fileAttacher__back"
+				:is-link="true"
+				@click="$emit('cancel')"
+			>
 				<icon icon="long-arrow-left" :inline="true" />
 				{{ backLabel }}
-			</button>
+			</pkp-button>
 			<pkp-button
 				:isPrimary="true"
 				:isDisabled="!selected.length"
@@ -86,4 +90,8 @@ export default {
 	min-height: 4rem;
 	font-size: @font-sml;
 }
+
+.fileAttacherReviewFiles .selectSubmissionFileListItem {
+	padding: 0.75rem 0.5rem 0.75rem 1rem;
+}
 </style>
diff --git a/src/components/FileAttacher/FileAttacherUpload.vue b/src/components/FileAttacher/FileAttacherUpload.vue
index 9863739df..c35da227b 100644
--- a/src/components/FileAttacher/FileAttacherUpload.vue
+++ b/src/components/FileAttacher/FileAttacherUpload.vue
@@ -57,10 +57,14 @@
 			/>
 		</div>
 		<div class="fileAttacher__footer">
-			<button class="fileAttacher__back -linkButton" @click="$emit('cancel')">
+			<pkp-button
+				class="fileAttacher__back"
+				:is-link="true"
+				@click="$emit('cancel')"
+			>
 				<icon icon="long-arrow-left" :inline="true" />
 				{{ backLabel }}
-			</button>
+			</pkp-button>
 			<pkp-button @click="selectFile">
 				{{ addFilesLabel }}
 			</pkp-button>
diff --git a/src/components/Panel/PanelSection.vue b/src/components/Panel/PanelSection.vue
index eac7a30e1..78be0d507 100644
--- a/src/components/Panel/PanelSection.vue
+++ b/src/components/Panel/PanelSection.vue
@@ -36,7 +36,8 @@ export default {
 	h2,
 	h3,
 	h4,
-	h5 {
+	h5,
+	h6 {
 		margin: 0;
 		font-size: @font-base-larger;
 		line-height: @line-base;
diff --git a/src/docs/components/ActionPanel/ComponentActionPanel.vue b/src/docs/components/ActionPanel/ComponentActionPanel.vue
new file mode 100644
index 000000000..578d1738a
--- /dev/null
+++ b/src/docs/components/ActionPanel/ComponentActionPanel.vue
@@ -0,0 +1,23 @@
+<script>
+import Component from '@/docs/Component.vue';
+import Preview from './previews/PreviewActionPanel.vue';
+import PreviewTemplate from '!raw-loader!./previews/PreviewActionPanel.vue';
+import readme from '!raw-loader!./readme.md';
+
+export default {
+	extends: Component,
+	data() {
+		return {
+			name: 'ActionPanel',
+			readme: readme,
+			examples: [
+				{
+					component: Preview,
+					name: 'Base',
+					template: this.extractTemplate(PreviewTemplate)
+				}
+			]
+		};
+	}
+};
+</script>
diff --git a/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue b/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue
new file mode 100644
index 000000000..0abc7924c
--- /dev/null
+++ b/src/docs/components/ActionPanel/previews/PreviewActionPanel.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="previewActionPanel">
+		<action-panel>
+			<h2 id="delete-title">Delete Incomplete Submissions</h2>
+			<p id="delete-description">
+				Delete all incomplete submissions that have not been modified in the
+				last month.
+			</p>
+			<template slot="actions">
+				<pkp-button
+					:isWarnable="true"
+					aria-describedby="delete-title delete-description"
+					@click="openDeleteDialog"
+				>
+					Delete All
+				</pkp-button>
+			</template>
+		</action-panel>
+		<action-panel>
+			<h2>Clear Cache</h2>
+			<p>
+				Clear the cached data and templates across the site. This will effect
+				cached values for all journals.
+			</p>
+			<template slot="actions">
+				<pkp-button>
+					Clear Data Cache
+				</pkp-button>
+				<pkp-button>
+					Clear Template/CSS Cache
+				</pkp-button>
+				<pkp-button :isWarnable="true">
+					Clear All Cache
+				</pkp-button>
+			</template>
+		</action-panel>
+		<action-panel>
+			<h2 id="sessions-title">Expire User Sessions</h2>
+			<p id="sessions-description">
+				Immediately expire all user sessions. This will force all users to login
+				again.
+			</p>
+			<template slot="actions">
+				<pkp-button :isWarnable="true" aria-describedby="sessions-description">
+					Expire Sessions
+				</pkp-button>
+			</template>
+		</action-panel>
+	</div>
+</template>
+
+<script>
+import ActionPanel from '../../../../components/ActionPanel/ActionPanel.vue';
+import dialog from '../../../../mixins/dialog';
+
+export default {
+	components: {
+		ActionPanel
+	},
+	mixins: [dialog],
+	methods: {
+		openDeleteDialog() {
+			this.openDialog({
+				name: 'deleteDialog',
+				title: 'Delete Incomplete Submissions',
+				message:
+					'Are you sure you want to delete 35 submissions? This action can not be undone.',
+				actions: [
+					{
+						label: 'Delete',
+						isWarnable: true,
+						callback: () => {
+							setTimeout(() => {
+								this.$modal.hide('deleteDialog');
+							}, 1000);
+						}
+					},
+					{
+						label: this.__('common.cancel'),
+						callback: () => this.$modal.hide('deleteDialog')
+					}
+				]
+			});
+		}
+	}
+};
+</script>
+
+<style lang="less">
+@import '../../../../styles/_import';
+
+.previewActionPanel .actionPanel {
+	margin-bottom: 2rem;
+}
+</style>
diff --git a/src/docs/components/ActionPanel/readme.md b/src/docs/components/ActionPanel/readme.md
new file mode 100644
index 000000000..29d6d92cf
--- /dev/null
+++ b/src/docs/components/ActionPanel/readme.md
@@ -0,0 +1,11 @@
+## Props
+
+This component does not accept any props.
+
+## Events
+
+This component does not emit any events.
+
+## Usage
+
+Use this component to pair an action, like a button or link, with a title and description.
\ No newline at end of file
diff --git a/src/mixins/global.js b/src/mixins/global.js
index d96d8c59a..bc3b091a8 100644
--- a/src/mixins/global.js
+++ b/src/mixins/global.js
@@ -158,9 +158,18 @@ export default {
 		 * @param {Boolean} toLast Move the focus to the last focusable element
 		 */
 		setFocusIn(el, toLast) {
-			let focusable = el.querySelectorAll(
-				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-			);
+			const selectors = [
+				'button',
+				'[href]',
+				'input',
+				'select',
+				'textarea',
+				'details',
+				'[tabindex]:not([tabindex="-1"])'
+			];
+			let focusable = [...el.querySelectorAll(selectors.join(','))]
+				.filter(node => !node.hasAttribute('disabled'))
+				.filter(node => !node.hasAttribute('aria-hidden'));
 			if (focusable.length) {
 				if (toLast) {
 					focusable[focusable.length - 1].focus();
diff --git a/src/router.js b/src/router.js
index b91b9e049..7cd953cb3 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import Page from './docs/Page.vue';
+import ComponentActionPanel from './docs/components/ActionPanel/ComponentActionPanel.vue';
 import ComponentAnnouncementsListPanel from './docs/components/ListPanel/ComponentAnnouncementsListPanel.vue';
 import ComponentBadge from './docs/components/Badge/ComponentBadge.vue';
 import ComponentButton from './docs/components/Button/ComponentButton.vue';
@@ -83,6 +84,11 @@ export default new Router({
 			name: 'page',
 			component: Page
 		},
+		{
+			path: '/component/ActionPanel/:example?',
+			name: 'ActionPanel',
+			component: ComponentActionPanel
+		},
 		{
 			path: '/component/Badge/:example?',
 			name: 'Badge',