Dialog

The Dialog API can be used to ask simple questions much like the JavaScript confirm() method.

You can launch a Dialog with methods to handle OK and Cancel.

ts.ui.Dialog.confirm('Will you try?', {
	onaccept: function() {
		ts.ui.Notification.success('Good luck');
	},
	oncancel: function() {
		ts.ui.Notification.success('Come back later');
	}
});

You are encouraged to specify the text of the OK button. The button should attempt to indicate what happens when you press it.

ts.ui.Dialog.confirm('Show the Notification?', 'Show It', {
	onaccept: function() {
		ts.ui.Notification.success('Good choice');
	},
});

You can add a third string argument to specify the Cancel text.

Buttons setup

Dialog buttons are secondary (blue) by default, but you can choose to make the accept or cancel button primary. You can also tweak the default focus.

ts.ui.Dialog.confirm('Sign up for Tradeshift?', 'Join Now', {
	primary: 'accept',
	focused: 'accept'
});

You can change the label of both the primary and secondary buttons.

ts.ui.Dialog.confirm('Sign up for Tradeshift?', 'Join Now', 'Not Now', {
	primary: 'accept',
	focused: 'accept'
});

Warning dialogs

You can launch special dialogs to confirm choices of more dire consequence.

ts.ui.Dialog.warning('This will delete the thing.', 'Delete It', {
	onaccept: function() {
		ts.ui.Dialog.danger(
			'Are you absolutely sure you want to ' +
			'*permanently* delete the whole thing?',
			'Delete It'
		);
	}
});

Dialog icons

You can point the icon property to an alternative icon class, but you should stick to the stock icons whenever possible so that the user can easily recognize the dialog type.

ts.ui.Dialog.confirm('Proceed to Checkout?', 'Check Out', {
	icon: 'ts-icon-cart',
	primary: 'accept',
	focused: 'accept'
});