7 Buttons & controls

Buttons & controls

Simplified library of buttons helps to signal actions clearly and consistently.

Important note: Please make sure to always implement the correct button according to its defined purpose, being either “Default”, “Function”, “Secondary” or “Primary” and the respective variants according to their back ground (see details below). Never chose a button style because it matches your visual preference in that specific moment. This breaks logical UX consistency and can also lead to unwanted visual result, once TME change styles (regular changes are foreseen).

An alternative version is used when the button appears on top of photography or on grey backgrounds.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

NOTE:

Any items suffixed by CORE may be used by any NMSCs or 3rd party of the T1 project. Any item that don't have the CORE suffix or that are suffixed by EXTENDED are reserved to the "t1-client" & "t1-server" project and might evolved in a non-expected way for anyone using them out of those two projects.

7.1 Default Button - CORE

Default Button - CORE

The default button has the base styling of all buttons. Specific classes should be added to it (.btn-simple, .btn-secondary, ...) to handled things such as: its background color, its background depending on section background, its hover/active/focus states,...

An alternative version is used when the button appears on top of photography or on grey backgrounds.

.btn.btn-simple

<a href="#" class="btn btn-simple">Button</a>

7.1.1 Default Button disabled - CORE

Default Button disabled - CORE

To disable any button the bootstrap class disabled can be added on the .btn element

.btn.disabled

<a href="#" class="btn disabled">Grey Button</a>

<!-- Note: you can add a wrapper handler to have your disabled button with a not-allowed cursor, the wrapper should only
 be added once the button is disabled and removed once the button is enabled -->

<br><br>
<div class="disabled-btn-wrapper">
    <a href="#" class="btn disabled">Grey Button not allowed</a>
</div>

7.1.2 Default Button with icon - EXTENDED

Default Button with icon - EXTENDED

All buttons with icons on the left (right for rtl), should have the .iconlink class added

.iconlink .icon

<a href="#" class="btn iconlink"><i class="icon icon-map-marker"></i><span>Grey Button</span></a>

7.1.3 Default Button with flexible width - CORE

Default Button with flexible width - CORE

Buttons have a default minimum width, to disable it and have the button width flexible depending on its text content only, a ".btn-flexwidth" class can be added to the .btn element

.btn.btn-flexwidth

Ok
<a href="#" class="btn btn-flexwidth">Ok</a>

7.1.4 Default Button small - CORE

Default Button small - CORE

.btn.btn-small

<a href="#" class="btn btn-small">Small Button</a>

7.2 Simple button - CORE

Simple button - CORE

The simple button is an extension of the default .btn style which can handle the button hover

.btn-simple

<a href="#" class="btn btn-simple">Simple Button</a>

7.2.1 Simple Button when grey background - CORE

Simple Button when grey background - CORE

button class = .btn, container class = .t1-grey-section

<div class="maincontent">
	<section class="t1-grey-section t1-colored-section section">
		<div class="container">
			<a href="#" class="btn btn-simple">Simple Button</a>
		</div>
	</section>
</div>

7.2.2 Simple Button when background image - CORE

Simple Button when background image - CORE

button class = .btn-simple, container class = .bg-img-btn-container

<style>
	.image0{
		background-image:url('//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/1-C-HR-Header-Desktop_tcm-11-728815.jpg');
	}
</style>

<div class="maincontent">
	<section class="bg-img-btn-container section image0">
		<div class="container">
			<a href="#" class="btn btn-simple">Simple Button</a>
		</div>
	</section>
</div>

7.3 Primary Button - CORE

Primary Button - CORE

Primary buttons should be used for the next best action for the user, directing them through the happy flow. It is not recommended to use more than one Primary button per section

.btn-action-primary

<a href="#" class="btn btn-action-primary">Primary Action Button</a>

7.3.1 Primary Button when grey background - CORE

Primary Button when grey background - CORE

On grey backgrounds, it remains the same.

button class = .btn-action-primary, container class = .t1-grey-section


<div class="maincontent">
	<section class="section t1-colored-section t1-grey-section">
		<div class="container">
			<a href="#" class="btn btn-action-primary">Primary Action Button</a>
		</div>
	</section>
</div>

7.3.2 Primary Button when background image - CORE

Primary Button when background image - CORE

An alternative version is used when the button appears on top of photography.

button class = .btn-action-primary, container class = .bg-img-btn-container

<style>
	.image0{
		background-image:url('//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/1-C-HR-Header-Desktop_tcm-11-728815.jpg');
	}
</style>

<div class="maincontent">
	<section class="section bg-img-btn-container image0">
		<div class="container">
			<a href="#" class="btn btn-action-primary">Primary Action Button</a>
		</div>
	</section>
</div>

7.4 Secondary Button - CORE

Secondary Button - CORE

Secondary buttons are used where we especially want to direct attention to an action, but it is not the next best action in the flow. (Where there are two alternative next best actions, the secondary button can be used to signify an alternative next best action.) It is not recommended to use more than one Secondary button per section.

.btn-action-secondary

<a href="#" class="btn btn-action-secondary">Secondary Action Button</a>

7.4.1 Secondary Button when grey background - CORE

Secondary Button when grey background - CORE

On grey backgrounds, it remains the same.

button class = .btn-action-secondary, container class = .t1-grey-section


<div class="maincontent">
	<section class="section t1-colored-section t1-grey-section">
		<div class="container">
			<a href="#" class="btn btn-action-secondary">Secondary Action Button</a>
		</div>
	</section>
</div>

7.4.2 Secondary Button when background image - CORE

Secondary Button when background image - CORE

An alternative version is used when the button appears on top of photography.

button class = .btn-action-secondary, container class = .bg-img-btn-container

<style>
	.image0{
		background-image:url('//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/1-C-HR-Header-Desktop_tcm-11-728815.jpg');
	}
</style>

<div class="maincontent">
	<section class="section bg-img-btn-container image0">
		<div class="container">
			<a href="#" class="btn btn-action-secondary">Secondary Action Button</a>
		</div>
	</section>
</div>

7.4.3 small button combined with a secondary button - EXTENDED

small button combined with a secondary button - EXTENDED

.btn-small + .btn-action-secondary

<a href="#" class="btn btn-small btn-action-secondary">Small secondary action Button</a>

7.5 Functional Button - CORE

Functional Button - CORE

Dark buttons are used for buttons that extend the functionality of the site, for example ‘Compare’ or ‘Expand’.

.btn-functional

<a href="#" class="btn btn-functional">Dark Button</a>

7.5.1 Functional Button when grey background - CORE

Functional Button when grey background - CORE

On grey backgrounds, it remains the same.

button class = .btn-functional, container class = .t1-grey-section


<div class="maincontent">
	<section class="section t1-colored-section t1-grey-section">
		<div class="container">
			<a href="#" class="btn btn-functional">Dark Button</a>
		</div>
	</section>
</div>

7.6 Full Width Button - EXTENDED

Full Width Button - EXTENDED

.btn-full-width

<a href="#" class="btn btn-full-width">Full Width Button</a>

7.7 Chevron button - CORE

Chevron button - CORE

Displays a button with a chevron on the right and transparent background by default. On hover, the background becomes light grey.

E.g: used for closing accordion sections and closing filtering dropdowns

.btn-chevron + .icon-chevron-down / .icon-chevron-up / .icon-chevron

<a href="#" class="btn btn-chevron">
  <i class="icon icon-chevron-up"></i>
  <span>Close item</span>
</a>

7.7.1 Chevron button when grey background - CORE

Chevron button when grey background - CORE

button class = .btn-chevron, container class = .t1-grey-section

<div class="maincontent">
	<section class="section t1-colored-section t1-grey-section">
		<div class="container">
			<a href="#" class="btn btn-chevron">
				<span class="icon icon-chevron-down"></span>
				<span>Show more</span>
			</a>
		</div>
	</section>
</div>

7.7.2 Expand button - CORE

Expand button - CORE

The expand button is a special case of a chevron button, using different background colors. The styling is dependent on .btn-chevron, so it should not be used without that class present

.btn-expand

<a href="#" class="btn btn-chevron btn-expand">
  <i class="icon icon-chevron-down"></i>
  <span>Show more</span>
</a>

7.7.3 Chevron button combined to small button - EXTENDED

Chevron button combined to small button - EXTENDED

.btn-chevron + .btn-small + .btn-flexwidth + .btn-simple

<a href="#" class="btn btn-chevron btn-simple btn-small btn-flexwidth">
  <i class="icon icon-chevron-down"></i>
  <span>Close item</span>
</a>

7.8 Toggle button - EXTENDED

Toggle button - EXTENDED

Toggle buttons are mainly used to expand and collapse extra items of a section

e.g: more about sections

.btn-toggle

<a href="#" class="btn btn-toggle btn-simple">
  <span>View all (8)</span>
</a>

7.8.1 Toggle Button when grey background - EXTENDED

Toggle Button when grey background - EXTENDED

button class = .btn-toggle, container class = .t1-grey-section

<div class="maincontent">
	<section class="section t1-colored-section t1-grey-section">
		<div class="container">
			<a href="#" class="btn btn-toggle btn-simple">
				  <span>View all (8)</span>
			</a>
		</div>
	</section>
</div>

7.9 Search button - EXTENDED

Search button - EXTENDED

Search buttons are usually used together with a search input box. As the search button is a functional button, it should be used together with the functional btn class: .btn-functional

Note: this search button is A BUTTON, some styled icons are similar to it, have a look at the icon section for those similar icons

.btn-search

<a href="#" class="btn btn-functional btn-search">
<i class="icon icon-search"></i>
</a>

7.10 Read more like links - CORE

Read more like links - CORE

The read more link is simply a link followed by a red right chevron. An additional class(e.g:read-more) should be used to handle events on the link to separate styling from interaction.

Note: make sure there is no space between and to have a default inline behavior. Having such a setup (absolute position chevron) is needed to prevent the text-decoration underline being applied on the icon...

.readmore-chevron

<a href="#" class="readmore-chevron"><span>Read more</span><i class="icon icon-chevron-right"></i></a>

7.11 Arrow control (right and left slider arrows) - CORE

Arrow control (right and left slider arrows) - CORE

The carousel and carousel like component arrows are obtained with the t1-arrow-control class. Note that inside .t1-grey-section, the arrow will have a white background instead of dark

.t1-arrow-control

<div id="arrow-control-sample">
    <style>
        #arrow-control-sample .t1-arrow-control{
            position: absolute;
        }
    </style>
    <!-- left / prev / right / next classes dependend of the carousel ... -->
    <div class="row" style="height:80px">
        <div class="col-xs-12 col-sm-3" ><a href="#" class="t1-arrow-control left"></a></div>
        <div class="col-xs-12 col-sm-3" ><a href="#" class="t1-arrow-control right"></a></div>
    </div>
    <div class="row t1-colored-section t1-grey-section" style="height:80px;">
        <div class="col-xs-12 col-sm-3" ><a href="#" class="t1-arrow-control prev"></a></div>
        <div class="col-xs-12 col-sm-3" ><a href="#" class="t1-arrow-control next"></a></div>
    </div>
</div>

7.12 Button side spacing - EXTENDED

Button side spacing - EXTENDED

By default, buttons will have some margin on the right from the SM breakpoint (768px width). There's no spacing on mobile by default as most buttons are fullwidth on mobile (if needed the spacing should be handled for the specific context the button is in).

List buttons also have their own spacing rules (see markup setup).

.list-buttons

<a href="#" class="btn btn-simple">Simple Button</a> <div style="display:inline-block; background:black; color:white;">Something inline with button</div>

<br><br>

<ul class="list-buttons">
    <li><a href="#" class="btn btn-simple">Simple Button</a></li>
    <li><a href="#" class="btn btn-simple">Simple Button</a></li>
    <li><a href="#" class="btn btn-simple">Simple Button</a></li>
</ul>

7.13 Close button - EXTENDED

Close button - EXTENDED

Button that can be used to close overlayers / materialbox / popups

.btn-close

<div style="position:relative;height:50px;width:50px;">
		<a href="#" class="btn btn-close">
  		<span class="icon icon-remove"></span>
	</a>
	</div>

7.14 Remove button - EXTENDED

Remove button - EXTENDED

Button that can be used to remove filters, in this example it's been extended with btn-small / btn-flexwidth

.btn-remove

	<a href="#" class="btn btn-small btn-flexwidth btn-remove">
		<span>Remove filter</span><i class="icon icon-remove"></i>
</a>

7.15 Chevron-right-to-btn-simple - EXTENDED

Chevron-right-to-btn-simple - EXTENDED

The 'chevron-right-to-btn-simple' button is a simple button which is transformed to the simple link followed by a right chevron.

.chevron-right-to-btn-simple

<a class="chevron-right-to-btn-simple" href="#" >Book a test drive</a>

7.16 Tab list - CORE

Tab list - CORE

A list of tabs. Note that an extension of this is available with the OVERFLOWABLE ROWS

.t1-tab-list > .tab(.active)

  • tab 1
  • tab 2
  • tab 3
  • tab 4
<ul class="t1-tab-list" href="#" ><li class="tab">tab 1</li><li class="tab active">tab 2</li><li class="tab">tab 3</li><li class="tab">tab 4</li></ul>

7.17 Toggle Switch - CORE

Privacy mode
<div class="t1-switch-container">
    <input type="checkbox" class="t1-switch-input" id="t1-switch" />
    <div class="t1-text-label">Privacy mode <br>
        <span class="t1-switch-state" data-on="On" data-off="Off"></span>
    </div>
    <label class="t1-switch" for="t1-switch">
        <span class="t1-slider"></span>
    </label>
</div>