Buttons | One Design

General button

These are the default buttons used throughout the ox design system, the styling can also be implemented on links.

When there's not much space at hand (such as in the header or modals), you can add the ox-button--small modifier to obtain smaller buttons.

Example

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--primary">Primary button</button>
	 <button type="button" class="ox-button ox-button--secondary">Secondary button</button>
	 <button type="button" class="ox-button ox-button--ghost">Ghost button</button>
	 <button type="button" class="ox-button ox-button--plain">Plain button</button>
</div>
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--small ox-button--primary">Primary button</button>
	 <button type="button" class="ox-button ox-button--small ox-button--secondary">Secondary button</button>
	 <button type="button" class="ox-button ox-button--small ox-button--ghost">Ghost button</button>
	 <button type="button" class="ox-button ox-button--small ox-button--plain">Plain button</button>
</div>

Buttons with icon

All the different types of buttons can be used with icons. Wether it's a default, small or floating button or if the icons are placed on the left or the right side. All you have to do is add the needed span in the button for the desired icon.

Take notice, if a button is needed with nothing else than an icon in it, you'll have to use an extra modifier.

Example

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--primary"><span class="ox-button__icon ox-button__icon--left ox-icon ox-icon--edit" aria-hidden="true"></span> Primary button</button>
	 <button type="button" class="ox-button ox-button--secondary"><span class="ox-button__icon ox-button__icon--left ox-icon ox-icon--edit" aria-hidden="true"></span> Secondary button</button>
	 <button type="button" class="ox-button ox-button--ghost"><span class="ox-button__icon ox-button__icon--left ox-icon ox-icon--edit" aria-hidden="true"></span> Ghost button</button>
	 <button type="button" class="ox-button ox-button--plain"><span class="ox-button__icon ox-button__icon--left ox-icon ox-icon--edit" aria-hidden="true"></span> Plain button</button>
</div>
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--small ox-button--primary">Primary button <span class="ox-button__icon ox-button__icon--right ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--small ox-button--secondary">Secondary button <span class="ox-button__icon ox-button__icon--right ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--small ox-button--ghost">Ghost button <span class="ox-button__icon ox-button__icon--right ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--small ox-button--plain">Plain button <span class="ox-button__icon ox-button__icon--right ox-icon ox-icon--edit" aria-hidden="true"></span></button>
</div>

Icon button

Buttons that only have an icon in them, without any added text need the modifier ox-button--icon or ox-button--icon-small depending on your needs.

Don't forget to add a well-descriptive title to the button, this is needed for accessibility reasons because there is no other text that determines the action linked to it.

Example

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--primary ox-button--icon" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--secondary ox-button--icon" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--ghost ox-button--icon" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--plain ox-button--icon" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
</div>
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--primary ox-button--icon-small" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--secondary ox-button--icon-small" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--ghost ox-button--icon-small" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	 <button type="button" class="ox-button ox-button--plain ox-button--icon-small" title="Edit item"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
</div>

Button list

When multiple grouped actions are linked to an item or page, you can use a button list.

Various types of buttons can be used inside a button list (e.g. default, with icons and icon buttons). If the amount of actions is too large, or the buttons are too big (because additional description is needed) you can use the button list combined with a drop-menu (when hiding different items under a dropmenu, make it the last item in the button list. Don't use more than one dropmenu inside a button-list).

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="ox-button-group">
	<button type="button" class="ox-button ox-button--icon-small ox-button--ghost ox-has-tooltip" aria-label="Edit" data-tooltip="Edit"><span class="ox-button__icon ox-icon ox-icon--edit" aria-hidden="true"></span></button>
	<div class="ox-button-list">
		<button type="button" class="ox-button ox-button--icon-small ox-button--ghost ox-has-tooltip" aria-label="Copy" data-tooltip="Copy"><span class="ox-button__icon ox-icon ox-icon--copy" aria-hidden="true"></span></button>
		<button type="button" class="ox-button ox-button--icon-small ox-button--ghost ox-has-tooltip" aria-label="Download" data-tooltip="Download"><span class="ox-button__icon ox-icon ox-icon--download" aria-hidden="true"></span></button>
		<button type="button" class="ox-button ox-button--icon-small ox-button--ghost ox-has-tooltip" aria-label="Print" data-tooltip="Print"><span class="ox-button__icon ox-icon ox-icon--print" aria-hidden="true"></span></button>
	</div>
	<button type="button" class="ox-button ox-button--icon-small ox-button--ghost ox-has-tooltip" aria-label="Delete" data-tooltip="Delete"><span class="ox-button__icon ox-icon ox-icon--trash" aria-hidden="true"></span></button>
</div>
<div class="ox-button-group ox-button-group--right">
	<div class="ox-button-list">
		<button type="button" class="ox-button ox-button--small ox-button--ghost" title="Send invoice">Send invoice</button>
		<div class="ox-dropmenu-wrapper" id="dox-drop-menu-example" aria-haspopup="true" aria-expanded="false">
			<input type="checkbox" class="ox-dropmenu-toggle" id="toggle-dropmenu">
			<label for="toggle-dropmenu" class="ox-dropmenu__trigger ox-button ox-button--ghost ox-button--icon-small" role="button" aria-label="Toggle dropmenu">
				<span class="ox-icon ox-icon--ellipsis-vertical"></span>
			</label>
			<div class="ox-dropmenu">
				<ul class="ox-dropmenu__list" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
					<li class="ox-dropmenu__option" role="presentation">
						<a href="#" class="ox-dropmenu__option__button" role="menuitem">
							<span class="ox-dropmenu__option__icon ox-icon ox-icon--download"></span>
							Download contract
						</a>
					</li>
					<li class="ox-dropmenu__option" role="presentation">
						<a href="#" class="ox-dropmenu__option__button" role="menuitem">
							<span class="ox-dropmenu__option__icon ox-icon ox-icon--duplicate"></span>
							New contract from quote
						</a>
					</li>
					<li class="ox-dropmenu__option ox-dropmenu__option--separator ox-dropmenu__option--error" role="presentation">
						<button type="button" class="ox-dropmenu__option__button" role="menuitem">
							<span class="ox-dropmenu__option__icon ox-icon ox-icon--close"></span>
							Cancel contract
						</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Disabled buttons

Example

1
2
3
4
5
6
<div class="ox-button-group">
	 <button type="button" class="ox-button ox-button--primary" disabled>Primary button</button>
	 <button type="button" class="ox-button ox-button--secondary" disabled>Secondary button</button>
	 <button type="button" class="ox-button ox-button--ghost" disabled>Ghost button</button>
	 <button type="button" class="ox-button ox-button--plain" disabled>Plain button</button>
</div>