align with portal button style (#14187)

* align with portal button style

* fix welcome page

* image button

* more fixes

* use withProperties

* add comment back

* add border radius

extensions/agent/src/dialogs/alertDialog.ts

@@ -352,9 +352,10 @@ export class AlertDialog extends AgentDialog<AlertData> {
 				.withProperties({ width: 375 })
 				.component();
 			this.executeJobTextBox.enabled = false;
-			this.newJobButton = view.modelBuilder.button().withProperties({
+			this.newJobButton = view.modelBuilder.button().withProps({
 				label: AlertDialog.NewJobButtonLabel,
-				width: 80
+				width: 80,
+				secondary: true
 			}).component();
 			this.newJobButton.enabled = false;
 			this.newJobButton.onDidClick(() => {
@@ -405,9 +406,10 @@ export class AlertDialog extends AgentDialog<AlertData> {
 					width: 375
 				}).component();
 
-			this.newOperatorButton = view.modelBuilder.button().withProperties({
+			this.newOperatorButton = view.modelBuilder.button().withProps({
 				label: AlertDialog.NewOperatorButtonLabel,
-				width: 80
+				width: 80,
+				secondary: true
 			}).component();
 
 			this.operatorsTable.enabled = false;

extensions/agent/src/dialogs/jobDialog.ts

@@ -59,6 +59,7 @@ export class JobDialog extends AgentDialog<JobData>  {
 	// Schedules tab strings
 	private readonly SchedulesTopLabelString: string = localize('jobDialog.schedulesaLabel', "Schedules list");
 	private readonly PickScheduleButtonString: string = localize('jobDialog.pickSchedule', "Pick Schedule");
+	private readonly RemoveScheduleButtonString: string = localize('jobDialog.removeSchedule', "Remove Schedule");
 
 	// Alerts tab strings
 	private readonly AlertsTopLabelString: string = localize('jobDialog.alertsList', "Alerts list");
@@ -241,26 +242,29 @@ export class JobDialog extends AgentDialog<JobData>  {
 			this.startStepDropdown.values = this.startStepDropdownValues;
 
 			this.moveStepUpButton = view.modelBuilder.button()
-				.withProperties({
+				.withProps({
 					label: this.MoveStepUpButtonString,
 					title: this.MoveStepUpButtonString,
-					width: 120
+					width: 120,
+					secondary: true
 				}).component();
 
 			this.moveStepDownButton = view.modelBuilder.button()
-				.withProperties({
+				.withProps({
 					label: this.MoveStepDownButtonString,
 					title: this.MoveStepDownButtonString,
-					width: 120
+					width: 120,
+					secondary: true
 				}).component();
 
 			this.moveStepUpButton.enabled = false;
 			this.moveStepDownButton.enabled = false;
 
-			this.newStepButton = view.modelBuilder.button().withProperties({
+			this.newStepButton = view.modelBuilder.button().withProps({
 				label: this.NewStepButtonString,
 				title: this.NewStepButtonString,
-				width: 140
+				width: 140,
+				secondary: true
 			}).component();
 
 			this.newStepButton.onDidClick((e) => {
@@ -285,16 +289,18 @@ export class JobDialog extends AgentDialog<JobData>  {
 				}
 			});
 
-			this.editStepButton = view.modelBuilder.button().withProperties({
+			this.editStepButton = view.modelBuilder.button().withProps({
 				label: this.EditStepButtonString,
 				title: this.EditStepButtonString,
-				width: 140
+				width: 140,
+				secondary: true
 			}).component();
 
-			this.deleteStepButton = view.modelBuilder.button().withProperties({
+			this.deleteStepButton = view.modelBuilder.button().withProps({
 				label: this.DeleteStepButtonString,
 				title: this.DeleteStepButtonString,
-				width: 140
+				width: 140,
+				secondary: true
 			}).component();
 
 			this.stepsTable.enabled = false;
@@ -443,9 +449,10 @@ export class JobDialog extends AgentDialog<JobData>  {
 					width: 400
 				}).component();
 
-			this.newAlertButton = view.modelBuilder.button().withProperties({
+			this.newAlertButton = view.modelBuilder.button().withProps({
 				label: this.NewAlertButtonString,
-				width: 80
+				width: 80,
+				secondary: true
 			}).component();
 
 			let alertDialog = new AlertDialog(this.model.ownerUri, this.model, null, true);
@@ -489,13 +496,13 @@ export class JobDialog extends AgentDialog<JobData>  {
 					width: 420
 				}).component();
 
-			this.pickScheduleButton = view.modelBuilder.button().withProperties({
+			this.pickScheduleButton = view.modelBuilder.button().withProps({
 				label: this.PickScheduleButtonString,
-				width: 80
+				secondary: true
 			}).component();
-			this.removeScheduleButton = view.modelBuilder.button().withProperties({
-				label: 'Remove schedule',
-				width: 100
+			this.removeScheduleButton = view.modelBuilder.button().withProps({
+				label: this.RemoveScheduleButtonString,
+				secondary: true
 			}).component();
 			this.pickScheduleButton.onDidClick(() => {
 				let pickScheduleDialog = new PickScheduleDialog(this.model.ownerUri, this.model.name);

extensions/agent/src/dialogs/jobStepDialog.ts

@@ -154,18 +154,20 @@ export class JobStepDialog extends AgentDialog<JobStepData> {
 
 	private createCommands(view: azdata.ModelView, queryProvider: azdata.QueryProvider) {
 		this.openButton = view.modelBuilder.button()
-			.withProperties({
+			.withProps({
 				label: this.OpenCommandText,
 				title: this.OpenCommandText,
 				width: '80px',
-				isFile: true
+				isFile: true,
+				secondary: true
 			}).component();
 		this.parseButton = view.modelBuilder.button()
-			.withProperties({
+			.withProps({
 				label: this.ParseCommandText,
 				title: this.ParseCommandText,
 				width: '80px',
-				isFile: false
+				isFile: false,
+				secondary: true
 			}).component();
 		this.openButton.onDidClick(e => {
 			let queryContent = e.fileContent;
@@ -492,7 +494,11 @@ export class JobStepDialog extends AgentDialog<JobStepData> {
 
 	private createTSQLOptions(view: azdata.ModelView) {
 		this.outputFileBrowserButton = view.modelBuilder.button()
-			.withProperties({ width: '20px', label: '...' }).component();
+			.withProps({
+				width: '20px',
+				label: '...',
+				secondary: true
+			}).component();
 		this.outputFileBrowserButton.onDidClick(() => this.openFileBrowserDialog());
 		this.outputFileNameBox = view.modelBuilder.inputBox()
 			.withProperties({

extensions/agent/src/dialogs/notebookDialog.ts

@@ -109,7 +109,8 @@ export class NotebookDialog extends AgentDialog<NotebookData>  {
 					title: '...',
 					width: '20px',
 					isFile: true,
-					fileType: '.ipynb'
+					fileType: '.ipynb',
+					secondary: true
 				}).component();
 			this.openTemplateFileButton.onDidClick(e => {
 				if (e) {
@@ -181,13 +182,15 @@ export class NotebookDialog extends AgentDialog<NotebookData>  {
 					width: 420
 				}).component();
 
-			this.pickScheduleButton = view.modelBuilder.button().withProperties({
+			this.pickScheduleButton = view.modelBuilder.button().withProps({
 				label: PickScheduleButtonString,
-				width: 110
+				width: 110,
+				secondary: true
 			}).component();
-			this.removeScheduleButton = view.modelBuilder.button().withProperties({
+			this.removeScheduleButton = view.modelBuilder.button().withProps({
 				label: RemoveScheduleButtonString,
-				width: 110
+				width: 110,
+				secondary: true
 			}).component();
 			this.pickScheduleButton.onDidClick(() => {
 				let pickScheduleDialog = new PickScheduleDialog(this.model.ownerUri, this.model.name);

extensions/arc/src/ui/components/filePicker.ts

@@ -30,7 +30,8 @@ export class FilePicker {
 		this.filePickerButton = modelBuilder.button()
 			.withProperties<azdata.ButtonProperties>({
 				label: loc.browse,
-				width: buttonWidth
+				width: buttonWidth,
+				secondary: true
 			}).component();
 		onNewDisposableCreated(this.filePickerButton.onDidClick(async () => {
 			const fileUris = await vscode.window.showOpenDialog({

extensions/big-data-cluster/src/bigDataCluster/dialog/commonControls.ts

@@ -8,7 +8,11 @@ import * as vscode from 'vscode';
 import * as loc from '../localizedConstants';
 
 export function createViewDetailsButton(modelBuilder: azdata.ModelBuilder, text: string): azdata.ButtonComponent {
-	const viewDetailsButton = modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.viewDetails, ariaLabel: loc.viewErrorDetails }).component();
+	const viewDetailsButton = modelBuilder.button().withProps({
+		label: loc.viewDetails,
+		ariaLabel: loc.viewErrorDetails,
+		secondary: true
+	}).component();
 	viewDetailsButton.onDidClick(() => {
 		vscode.window.showErrorMessage(text, { modal: true });
 	});

extensions/dacpac/src/wizard/api/dacFxConfigPage.ts

@@ -171,10 +171,11 @@ export abstract class DacFxConfigPage extends BasePage {
 		});
 
 		this.fileTextBox.ariaLabel = loc.fileLocation;
-		this.fileButton = this.view.modelBuilder.button().withProperties({
+		this.fileButton = this.view.modelBuilder.button().withProps({
 			label: '•••',
 			title: loc.selectFile,
-			ariaLabel: loc.selectFile
+			ariaLabel: loc.selectFile,
+			secondary: true
 		}).component();
 	}
 

extensions/import/src/wizard/pages/fileConfigPage.ts

@@ -245,6 +245,7 @@ export class FileConfigPage extends ImportPage {
 
 		this.fileButton = this.view.modelBuilder.button().withProperties({
 			label: constants.browseFilesText,
+			secondary: true
 		}).component();
 
 		this.fileButton.onDidClick(async (click) => {

extensions/import/src/wizard/pages/prosePreviewPage.ts

@@ -70,9 +70,10 @@ export class ProsePreviewPage extends ImportPage {
 			columns: undefined,
 			forceFitColumns: azdata.ColumnSizingMode.DataFit
 		}).component();
-		this.refresh = this.view.modelBuilder.button().withProperties({
+		this.refresh = this.view.modelBuilder.button().withProps({
 			label: constants.refreshText,
-			isFile: false
+			isFile: false,
+			secondary: true
 		}).component();
 
 		this.refresh.onDidClick(async () => {

extensions/machine-learning/src/views/externalLanguages/languageContentView.ts

@@ -66,12 +66,13 @@ export class LanguageContentView extends LanguageViewBase {
 			value: '',
 			width: parent.componentMaxLength - parent.browseButtonMaxLength - parent.spaceBetweenComponentsLength
 		}).component();
-		let fileBrowser = this._modelBuilder.button().withProperties({
+		let fileBrowser = this._modelBuilder.button().withProps({
 			label: '...',
 			width: parent.browseButtonMaxLength,
 			CSSStyles: {
 				'text-align': 'end'
-			}
+			},
+			secondary: true
 		}).component();
 
 		let flexFilePathModel = this._modelBuilder.flexContainer()

extensions/machine-learning/src/views/models/azureSignInComponent.ts

@@ -22,9 +22,10 @@ export class AzureSignInComponent extends ModelViewBase {
 	 */
 	constructor(apiWrapper: ApiWrapper, private _modelBuilder: azdata.ModelBuilder, parent: ModelViewBase) {
 		super(apiWrapper, parent.root, parent);
-		this._signInButton = this._modelBuilder.button().withProperties({
+		this._signInButton = this._modelBuilder.button().withProps({
 			width: componentWidth,
 			label: constants.azureSignIn,
+			secondary: true
 		}).component();
 		this._signInButton.onDidClick(() => {
 			this.sendRequest(SignInToAzureEventName);

extensions/mssql/src/dashboard/bookWidget.ts

@@ -28,9 +28,10 @@ export function registerBooksWidget(bookContributionProvider: BookContributionPr
 			const bookRow = view.modelBuilder.flexContainer().withLayout({
 				flexFlow: 'row'
 			}).component();
-			const tsgbooklink = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			const tsgbooklink = view.modelBuilder.button().withProps({
 				label: contribution.name,
-				title: contribution.name
+				title: contribution.name,
+				secondary: true
 			}).component();
 			tsgbooklink.onDidClick(() => {
 				let uri: vscode.Uri = vscode.Uri.file(contribution.path);

extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts

@@ -211,7 +211,11 @@ export class ManageAccessDialog {
 			this.hdfsModel.createAndAddAclEntry(value, this.addUserOrGroupSelectedType);
 			this.addUserOrGroupInput.value = '';
 		});
-		const addUserOrGroupButton = this.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.addLabel, width: 75 }).component();
+		const addUserOrGroupButton = this.modelBuilder.button().withProps({
+			label: loc.addLabel,
+			width: 75,
+			secondary: true
+		}).component();
 		addUserOrGroupButton.onDidClick(() => {
 			this.hdfsModel.createAndAddAclEntry(this.addUserOrGroupInput.value, this.addUserOrGroupSelectedType);
 			this.addUserOrGroupInput.value = '';

extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts

@@ -138,7 +138,8 @@ export class SparkConfigurationTab {
 				enabled: (this._path) ? false : true,
 				label: '•••',
 				width: constants.mssqlClusterSparkJobFileSelectorButtonWidth,
-				height: constants.mssqlClusterSparkJobFileSelectorButtonHeight
+				height: constants.mssqlClusterSparkJobFileSelectorButtonHeight,
+				secondary: true
 			}).component();
 			this._filePickerButton.onDidClick(() => this.onSelectFile());
 

extensions/notebook/src/dialog/configurePython/configurePathPage.ts

@@ -53,9 +53,10 @@ export class ConfigurePathPage extends BasePage {
 			})
 			.component();
 		let browseButton = this.view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: this.BrowseButtonText,
-				width: '70px'
+				width: '70px',
+				secondary: true
 			}).component();
 		browseButton.onDidClick(() => this.handleBrowse());
 
@@ -88,9 +89,10 @@ export class ConfigurePathPage extends BasePage {
 				enabled: false,
 				width: '400px'
 			}).component();
-			let editPathButton = this.view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			let editPathButton = this.view.modelBuilder.button().withProps({
 				label: 'Edit',
-				width: '70px'
+				width: '70px',
+				secondary: true
 			}).component();
 			let editPathForm = this.view.modelBuilder.formContainer()
 				.withFormItems([{

extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts

@@ -39,9 +39,10 @@ export class AddNewPackageTab {
 			});
 
 			this.packagesSearchButton = view.modelBuilder.button()
-				.withProperties<azdata.ButtonProperties>({
+				.withProps({
 					label: localize('managePackages.searchButtonLabel', "Search"),
-					width: '200px'
+					width: '200px',
+					secondary: true
 				}).component();
 			this.packagesSearchButton.onDidClick(async () => {
 				await this.loadNewPackageInfo();
@@ -64,7 +65,8 @@ export class AddNewPackageTab {
 
 			this.packageInstallButton = view.modelBuilder.button().withProperties({
 				label: localize('managePackages.installButtonText', "Install"),
-				width: '200px'
+				width: '200px',
+				secondary: true
 			}).component();
 			this.packageInstallButton.onDidClick(async () => {
 				await this.doPackageInstall();

extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts

@@ -103,9 +103,10 @@ export class InstalledPackagesTab {
 			}));
 
 			this.uninstallPackageButton = view.modelBuilder.button()
-				.withProperties({
+				.withProps({
 					label: localize('managePackages.uninstallButtonText', "Uninstall selected packages"),
-					width: '200px'
+					width: '200px',
+					secondary: true
 				}).component();
 			this.uninstallPackageButton.onDidClick(() => this.doUninstallPackage(this.installedPackagesTable.selectedRows));
 

extensions/notebook/src/dialog/remoteBookDialog.ts

@@ -63,7 +63,8 @@ export class RemoteBookDialog {
 			this.searchButton = this.view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
 				label: loc.search,
 				title: loc.search,
-				width: '200px'
+				width: '200px',
+				secondary: true
 			}).component();
 			this.searchButton.onDidClick(async () => await this.validate());
 

extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts

@@ -168,11 +168,13 @@ export class AzureSettingsPage extends BasePage {
 
 		this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
 			label: localizedConstants.signIn,
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 		this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
 			label: localizedConstants.refresh,
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 
 		this.signInButton.onDidClick(async (event) => {

extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts

@@ -107,11 +107,13 @@ export class AzureSettingsPage extends BasePage {
 
 		this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
 			label: localizedConstants.signIn,
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 		this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
 			label: localizedConstants.refresh,
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 
 		this.signInButton.onDidClick(async (event) => {

extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts

@@ -87,7 +87,7 @@ export class TargetClusterContextPage extends ResourceTypePage {
 		configFileLabel.width = labelWidth;
 		this.configFileInput = this.view!.modelBuilder.inputBox().withProperties({ width: '300px' }).component();
 		this.configFileInput.enabled = false;
-		this.browseFileButton = this.view!.modelBuilder.button().withProperties({ label: localize('deployCluster.browseText', "Browse"), width: '100px' }).component();
+		this.browseFileButton = this.view!.modelBuilder.button().withProperties({ label: localize('deployCluster.browseText', "Browse"), width: '100px', secondary: true }).component();
 		let configFileContainer = this.view!.modelBuilder.flexContainer()
 			.withLayout({ flexFlow: 'row', alignItems: 'baseline' })
 			.withItems([configFileLabel, this.configFileInput, this.browseFileButton], { CSSStyles: { 'margin-right': '10px' } }).component();

extensions/resource-deployment/src/ui/modelViewUtils.ts

@@ -868,7 +868,11 @@ function processFilePickerField(context: FieldContext): FilePickerInputs {
 	input.labelComponent = label;
 	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, input);
 	input.component.enabled = false;
-	const browseFileButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.browse, width: buttonWidth }).component();
+	const browseFileButton = context.view!.modelBuilder.button().withProps({
+		label: loc.browse,
+		width: buttonWidth,
+		secondary: true
+	}).component();
 	const fieldInfo = context.fieldInfo as FilePickerFieldInfo;
 	let filter: { [name: string]: string[] } | undefined = undefined;
 	if (fieldInfo.filter) {
@@ -1163,8 +1167,8 @@ function createAzureAccountDropdown(context: AzureAccountFieldContext): AzureAcc
 	accountDropdown.component.fireOnTextChange = true;
 	accountDropdown.labelComponent = label;
 	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, accountDropdown);
-	const signInButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.signIn, width: '100px' }).component();
-	const refreshButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.refresh, width: '100px' }).component();
+	const signInButton = context.view!.modelBuilder.button().withProps({ label: loc.signIn, width: '100px', secondary: true }).component();
+	const refreshButton = context.view!.modelBuilder.button().withProps({ label: loc.refresh, width: '100px', secondary: true }).component();
 	addLabelInputPairToContainer(context.view, context.components, label, accountDropdown.component, context.fieldInfo);
 
 	const buttons = createFlexContainer(context.view!, [signInButton, refreshButton], true, undefined, undefined, undefined, { 'margin-right': '10px' });

extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts

@@ -142,6 +142,7 @@ export class ToolsAndEulaPage extends ResourceTypePage {
 					'display': 'none',
 				},
 				width: '100px',
+				secondary: true
 			}).component();
 
 			this.wizard.registerDisposable(this._installToolButton.onDidClick(() => {

extensions/schema-compare/src/dialogs/schemaCompareDialog.ts

@@ -282,13 +282,15 @@ export class SchemaCompareDialog {
 			this.targetFileButton = this.view.modelBuilder.button().withProperties({
 				label: '•••',
 				title: loc.selectTargetFile,
-				ariaLabel: loc.selectTargetFile
+				ariaLabel: loc.selectTargetFile,
+				secondary: true
 			}).component();
 		} else {
 			this.sourceFileButton = this.view.modelBuilder.button().withProperties({
 				label: '•••',
 				title: loc.selectSourceFile,
-				ariaLabel: loc.selectSourceFile
+				ariaLabel: loc.selectSourceFile,
+				secondary: true
 			}).component();
 		}
 

extensions/schema-compare/src/schemaCompareMainWindow.ts

@@ -888,7 +888,8 @@ export class SchemaCompareMainWindow {
 		this.selectSourceButton = this.view.modelBuilder.button().withProperties({
 			label: '•••',
 			title: loc.selectSource,
-			ariaLabel: loc.selectSource
+			ariaLabel: loc.selectSource,
+			secondary: true
 		}).component();
 
 		this.selectSourceButton.onDidClick(async () => {
@@ -901,7 +902,8 @@ export class SchemaCompareMainWindow {
 		this.selectTargetButton = this.view.modelBuilder.button().withProperties({
 			label: '•••',
 			title: loc.selectTarget,
-			ariaLabel: loc.selectTarget
+			ariaLabel: loc.selectTarget,
+			secondary: true
 		}).component();
 
 		this.selectTargetButton.onDidClick(async () => {

extensions/sql-migration/src/wizard/createMigrationControllerDialog.ts

@@ -327,6 +327,7 @@ export class CreateMigrationControllerDialog {
 
 		const refreshButton = this._view.modelBuilder.button().withProps({
 			label: constants.REFRESH,
+			secondary: true
 		}).component();
 
 		const refreshLoadingIndicator = this._view.modelBuilder.loadingComponent().withProps({
@@ -383,7 +384,8 @@ export class CreateMigrationControllerDialog {
 			CSSStyles: {
 				'margin-top': '10px'
 			},
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 
 		refreshKeyButton.onDidClick(async (e) => {
@@ -437,7 +439,8 @@ export class CreateMigrationControllerDialog {
 		const keys = await getMigrationControllerAuthKeys(this.migrationStateModel.azureAccount, subscription, resourceGroup, region, this.migrationStateModel.migrationController!.name);
 
 		this._copyKey1Button = this._view.modelBuilder.button().withProps({
-			label: constants.COPY_KEY
+			label: constants.COPY_KEY,
+			secondary: true
 		}).component();
 
 		this._copyKey1Button.onDidClick((e) => {
@@ -446,7 +449,8 @@ export class CreateMigrationControllerDialog {
 		});
 
 		this._copyKey2Button = this._view.modelBuilder.button().withProps({
-			label: constants.COPY_KEY
+			label: constants.COPY_KEY,
+			secondary: true
 		}).component();
 
 		this._copyKey2Button.onDidClick((e) => {

extensions/sql-migration/src/wizard/integrationRuntimePage.ts

@@ -32,6 +32,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 		const createNewController = view.modelBuilder.button().withProps({
 			label: constants.NEW,
 			width: '100px',
+			secondary: true
 		}).component();
 
 		createNewController.onDidClick((e) => {
@@ -53,7 +54,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 
 		this.startSetupButton = view.modelBuilder.button().withProps({
 			label: constants.CREATE,
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 
 		this.startSetupButton.onDidClick((e) => {
@@ -68,7 +70,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 
 		this.cancelSetupButton = view.modelBuilder.button().withProps({
 			label: constants.CANCEL,
-			width: '100px'
+			width: '100px',
+			secondary: true
 		}).component();
 
 		this.cancelSetupButton.onDidClick((e) => {

extensions/theme-carbon/themes/dark_carbon.json

@@ -14,18 +14,19 @@
 		"textLinkActiveForeground": "#30b4ff",
 
 		//Button control
-		"button.background": "#0078D4",
-		"button.foreground": "#ffffff",
-		"button.hoverBackground": "#106EBE",
+		"button.background": "#4894FE",
+		"button.foreground": "#111111",
+		"button.hoverBackground": "#6CA9FE",
+		"button.border": "#4894FE",
 
-		// TODO add support for these
-		"button.secondaryBackground": "#1B1A19",
-		"button.secondaryHoverBackground": "#1B1A19",
-		"button.secondaryForeground": "#ffffff",
-		"button.secondaryHoverForeground": "#0078D4",
+		"button.secondaryBackground": "#212121",
+		"button.secondaryHoverBackground": "#7F7F7F19",
+		"button.secondaryForeground": "#4894FE",
+		"button.secondaryBorder": "#4894FE",
 
-		"button.disabledBackground": "#252423",
-		"button.disabledForeground": "#797775",
+		"button.disabledBackground": "#7F7F7F19",
+		"button.disabledForeground": "#797775B2",
+		"button.disabledBorder": "#7F7F7F19",
 
 
 		//Checkbox

extensions/theme-carbon/themes/light_carbon.json

@@ -14,18 +14,19 @@
 		"textLinkActiveForeground": "#3062d6",
 
 		//Button control
-		"button.background": "#007ACC",
-		"button.foreground": "#ffffff",
-		"button.hoverBackground": "#0078d7",
+		"button.background": "#0078D4",
+		"button.foreground": "#FFFFFF",
+		"button.hoverBackground": "#106EBE",
+		"button.border": "#0078D4",
 
-		// TODO add support for these
-		"button.secondaryBackground": "#ffffff",
-		"button.secondaryHoverBackground": "#ffffff",
+		"button.secondaryBackground": "#FFFFFF",
+		"button.secondaryHoverBackground": "#F3F2F1",
 		"button.secondaryForeground": "#323130",
-		"button.secondaryHoverForeground": "#0078D4",
+		"button.secondaryBorder": "#8A8886",
 
 		"button.disabledBackground": "#F3F2F1",
 		"button.disabledForeground": "#A19F9D",
+		"button.disabledBorder": "#F3F2F1",
 
 
 		//Checkbox