Buttons
With the Metro 4 you can easily create different types of buttons, stylized to Windows Metro Style.
Push buttons
Button styles can be applied to anything with the .button class applied. To change button color use one of accent color subclasses: .primary, .secondary, .success, .alert, .warning, .yellow, .info, .dark.
<button class="button">Default</button>
<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button success">Success</button>
<button class="button alert">Alert</button>
<button class="button warning">Warning</button>
<button class="button yellow">Yellow</button>
<button class="button info">Info</button>
<button class="button dark">Dark</button>
<button class="button light">Light</button>
<button class="button link">Link</button>
Note for .button class
The .button class are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
When using button class on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
<a class="button " href="#" role="button">Link</a>
<input class="button " type="button" value="Input">
<input class="button " type="submit" value="Submit">
<input class="button " type="reset" value="Reset">
Push buttons with icons
Metro 4 support both types for adding icon to button: icon font and image.
<button class="button"><span class="mif-checkmark"></span> Font</button>
<button class="button"><span class="mif-users"></span></button>
<button class="button"><img src="images/checkmark.png"> Image</button>
<button class="button"><img src="images/keycdn-logo.svg"></button>
Outline buttons
In need of a button, but not the hefty background colors they bring? Add subclass .outline to remove all background images and colors on any button.
<button class="button primary outline">Primary</button>
<button class="button secondary outline">Secondary</button>
<button class="button success outline">Success</button>
<button class="button alert outline">Alert</button>
<button class="button warning outline">Warning</button>
<button class="button info outline">Info</button>
<button class="button dark outline">Dark</button>
<button class="button yellow outline">Yellow</button>
Note for outline
outline class required one of accent color subclasses: .primary, .secondary, .success, .alert, .warning, .yellow, .info, .dark.
Push button sizes
Fancy larger or smaller buttons? Add one of classes: .mini, .small or .large for additional sizes.
<button class="button primary mini">mini</button>
<button class="button primary small">small</button>
<button class="button primary">default</button>
<button class="button primary large">Large button</button>
<button class="button primary outline mini">Mini</button>
<button class="button secondary outline small">Small</button>
<button class="button success outline">Default</button>
<button class="button alert outline large">Outline Large</button>
Rounded corners
Need rounded corners? Add class: .rounded. This class add border-radius: 0.25rem to button.
<button class="button primary mini rounded">mini</button>
<button class="button success outline rounded">Default</button>
Square & cycle buttons
Need square or cycle button? Add one of modifiers classes: .square or .cycle.
<button class="button primary square mini"></button>
<button class="button primary square outline"></button>
<button class="button primary cycle small outline"></button>
<button class="button primary cycle "></button>
Shadowed button
You can easy create button with shadow. Add class .drop-shadow to button and get button with shadow.
<button class="button drop-shadow">Default</button>
Flat buttons
A button made of ink that displays ink reactions on press but does not lift.
<button class="button flat-button">Flat button</button>
Command buttons
Need a Windows Command button? Create it with class .command-button. Command button support accent mode (primary, alert, ...), outline mode, rounded corners and left or right icon position.
<button class="command-button">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>
<button class="command-button primary outline rounded">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>
<button class="command-button icon-right warning">
<span class="mif-share icon"></span>
<span class="caption">
Yes, share and connect
<small>Use this option for home or work</small>
</span>
</button>
Image buttons
With Metro 4 you can simple create image button. Use .image-button class to create image button. Image button support accent mode (primary, alert, ...), outline mode, rounded corners and left or right icon position.
<button class="image-button">
<span class="mif-share icon"></span>
<span class="caption">Share it</span>
</button>
<button class="image-button icon-right">
<span class="mif-share icon"></span>
<span class="caption">Share it</span>
</button>
<button class="image-button alert">
<span class="mif-share icon"></span>
<span class="caption">Share it</span>
</button>
<button class="image-button warning outline">
<span class="mif-share icon"></span>
<span class="caption">Share it</span>
</button>
Shortcuts
Need shortcut button? With Metro 4 you can simple create shortcut button. Use .shortcut class to create shortcut button. Shortcuts support accent mode (primary, alert, ...), outline mode and rounded corners.
<button class="shortcut">
<span class="caption">Rocket</span>
<span class="mif-rocket icon"></span>
</button>
<button class="shortcut">
<span class="tag">10</span>
<span class="caption">Rocket</span>
<span class="mif-rocket icon"></span>
</button>
<button class="shortcut primary">
<span class="tag">10</span>
<span class="caption">Rocket</span>
<span class="mif-rocket icon"></span>
</button>
<button class="shortcut secondary outline">
<span class="tag">10</span>
<span class="caption">Rocket</span>
<span class="mif-rocket icon"></span>
</button>
<button class="shortcut alert rounded">
<span class="tag">10</span>
<span class="caption">Rocket</span>
<img src="images/checkmark.png" class="icon">
</button>
<button class="shortcut info outline rounded no-caption">
<span class="tag">10</span>
<span class="mif-rocket icon"></span>
</button>
Toolbars
If you need to create toolbar, Metro 4 provides the special classes fro this: .toolbar and .tool-button. Toolbar buttons support accent mode (primary, alert, ...), outline mode and rounded corners.
<div class="toolbar">
<button class="tool-button"><span class="mif-floppy-disk"></span></button>
<button class="tool-button"><img src="images/checkmark.png"></button>
<button class="tool-button">Open</button>
</div>
<div class="toolbar">
<button class="tool-button primary">...</button>
<button class="tool-button primary outline">...</button>
<button class="tool-button primary rounded">...</button>
</div>
Dropdown
If you need to create button with dropdown menu, use .dropdown-button wrapper.
<div class="dropdown-button">
<button class="button dropdown-toggle">Button</button>
<ul class="d-menu" data-role="dropdown">
<li><a href="#">Reply</a></li>
<li><a href="#">Reply All</a></li>
<li><a href="#">Forward</a></li>
</ul>
</div>
<div class="dropdown-button place-right">
<button class="button dropdown-toggle">Button</button>
<ul class="d-menu place-right" data-role="dropdown">
<li><a href="#">Reply</a></li>
<li><a href="#">Reply All</a></li>
<li><a href="#">Forward</a></li>
</ul>
</div>
Split buttons
If you need to create split button with primary function and dropdown menu, use .split-button wrapper.
<div class="split-button">
<button class="button">Reply</button>
<button class="split dropdown-toggle"></button>
<ul class="d-menu" data-role="dropdown">
<li><a href="#">Reply All</a></li>
<li><a href="#">Forward</a></li>
<li class="divider"></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
Info button
If you need to create info button (as github split button) with primary function and additional info, use .info-button wrapper.
<div class="info-button">
<a href="#" class="button"><span class="mif-star-full"></span> Star</a>
<a href="#" class="info">5,547</a>
</div>
<div class="info-button bg-red fg-white bd-red">
<a href="#" class="button"><span class="mif-star-full"></span> Star</a>
<a href="#" class="info">5,547</a>
</div>
<div class="info-button success bd-green rounded">
<a href="#" class="button"><span class="mif-star-full"></span> Star</a>
<a href="#" class="info">5,547</a>
</div>
Pagination
Need to create pagination? Create it easy with class .pagination. Pagination support accent mode (primary, alert, ...) and rounded corners.
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item no-link"><a class="page-link">...</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item service"><a class="page-link" href="#">Next ></a></li>
</ul>
<ul class="pagination alert">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item no-link"><a class="page-link">...</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item service"><a class="page-link" href="#">Next ></a></li>
</ul>
<ul class="pagination success rounded">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item no-link"><a class="page-link">...</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item service"><a class="page-link" href="#">Next ></a></li>
</ul>
Pagination with no gaps
If you need pagination control with no gaps, use .no-gap subclass to remove it.
<ul class="pagination no-gap">...</ul>
Disabled items
If you need create disabled item for pagination, use class .disabled for required item. While the .disabled class uses pointer-events: none to try to disable the link functionality of <a> , that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.
<ul class="pagination no-gap">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item no-link"><a class="page-link">...</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item service"><a class="page-link" href="#">Next</a></li>
</ul>
Sizing
Fancy larger or smaller pagination? Add .size-large or .size-small for additional sizes.
<ul class="pagination size-large">...</ul>
<ul class="pagination no-gap size-large">...</ul>
<ul class="pagination size-small">...</ul>
<ul class="pagination no-gap size-small">...</ul>
Alignment
You can chage alignment of pagination with flexbox utilities with a classes .flex-justify-* and them media variants.
<ul class="pagination flex-justify-start">...</ul>
<ul class="pagination flex-justify-center">...</ul>
<ul class="pagination flex-justify-end">...</ul>
Breadcrumbs
Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. Separators are automatically added in CSS through ::before and ::after.
<ul class="breadcrumbs">
<li class="page-item"><a href="#" class="page-link">Home</a></li>
<li class="page-item"><a href="#" class="page-link">Products</a></li>
<li class="page-item"><a href="#" class="page-link">Downloads</a></li>
<li class="page-item"><a href="#" class="page-link">Windows 10</a></li>
</ul>
Button group
To create group add attribute data-role="buttongroup" to buttons container.
To setup mode of toggle, use attribute data-mode="..." with one of values: one (default) or multi.
Also you can set own classes to style active state with attribute data-cls-active="...". The default value for this attribute active.
Default (one state)
Multi state
Toolbar example
<div data-role="buttongroup">
<button class="button">1</button>
<button class="button">2</button>
<button class="button active">3</button>
</div>
<div data-role="buttongroup" data-mode="multi"
data-cls-active="bg-red fg-white">
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
</div>
<div class="toolbar" data-role="buttongroup"
data-mode="multi">
<button class="tool-button rounded">
<span class="mif-bold"></span>
</button>
<button class="tool-button rounded">
<span class="mif-italic"></span>
</button>
<button class="tool-button rounded">
<span class="mif-underline"></span>
</button>
</div>
<div class="toolbar" data-role="buttongroup">
<button class="tool-button rounded">
<span class="mif-sort-asc"></span>
</button>
<button class="tool-button rounded">
<span class="mif-sort-desc"></span>
</button>
</div>
For button group you can use two events: data-on-button-group-create and data-on-button-click.
<div class="toolbar"
data-role="buttongroup"
data-on-button-click="console.log(arguments);">
...
</div>
if you use <span> or <a> tags for creating buttons, you must specify this with attribute data-targets="..."
<div data-role="buttongroup" data-targets="button, a, span">
<button class="button">1</button>
<a class="button">2</a>
<span class="button">3</span>
</div>