Add buttons to the TopBar with the buttons method. This both sets and gets. If you omit the argument, you"ll get the current buttons (jQuery style).

ts.ui.TopBar.buttons([
	{label : 'Primary', type : 'ts-primary'},
	{label : 'Secondary', type : 'ts-secondary'},
	{label : 'Tertiary One'},
	{label : 'Tertiary Two'}
]);

You can use array methods like push, pop, shift, unshift, splice, reverse and so on to manage buttons. Just note that the buttons length is readonly.

• The buttons type property works like the CSS class for a regular Button
• The TopBar will automatically sort all buttons from primary to tertiary.
• If there"s more than one tertiary button, these will be pushed to an Aside.
• In the mobile breakpoint, even secondary buttons will be pushed to the Aside.

Buttons won"t actually do anything unless you define the onclick method.

ts.ui.TopBar.buttons().splice(0, 1, {
	label : 'Click me!',
	type : 'ts-primary',
	onclick: function() {
		this.label = 'Thanks';
	}
});

Fortunately, you can always change what happens when a button gets clicked.

ts.ui.TopBar.buttons().forEach((button, index) => {
	button.label = "Button " + (index + 1);
	button.onclick = function() {
		ts.ui.Notification.success(this.label);
	};
});

Query buttons

You can locate buttons by index in the buttons collection. But since this isn"t likely to match the order in which they appear on screen, it"s easier to give the buttons an id and find them using buttons.get().

var buttons = ts.ui.TopBar.buttons();
buttons.push({ id: 'example-button' });
var button = buttons.get('example-button');
button.label = 'My Button';
button.type = 'ts-secondary';

Hide buttons

You can hide() and show() buttons. You can also toggle visible.

ts.ui.TopBar.buttons().forEach(button => {
	if(button.visible) {
		button.hide();
	} else {
		button.show();
	}
});

Disable buttons

You can disable() and enable() buttons. You can also toggle disabled.

ts.ui.TopBar.buttons().forEach(button => {
	if(button.disabled) {
		button.enable();
	} else {
		button.disable();
	}
});

Busy buttons

We can display a temporary progress indicator with the busy and done methods.

var button = ts.ui.TopBar.buttons()[0];
button.busy();
setTimeout(() => {
	button.done();
}, 1000);

The busy method supports an optional status message.

var button = ts.ui.TopBar.buttons()[0];
button.busy('Making progress');
setTimeout(() => {
	button.done();
}, 1000);

Button groups

You can also group buttons in arrays to create button groups that look like this:

ts.ui.TopBar.buttons([
	{ label: 'Normal'},
	{ label: 'Normal'},
	[
		{ label: 'Accept', type: 'ts-primary' },
		{ label: 'Reject', type: 'ts-danger' }
	]
]);

You can of course also create grouped buttons with icons instead of text.

var group = ts.ui.TopBar.buttons()[2];
group.push({
	icon: 'ts-icon-other',
	type: 'ts-danger'
});

Here"s a summary of the buttons collection and button model.