carbon-components
Version:
Carbon Components is a component library for IBM Cloud
87 lines (84 loc) • 3.19 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<button class="bx--btn bx--btn--danger--primary"
aria-label="danger" type="button">
Button
</button>
<button class="bx--btn bx--btn--danger--primary"
aria-label="danger" type="button" disabled>
Button
</button>
<button class="bx--btn bx--btn--danger--primary"
aria-label="danger" type="button">
With icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</button>
<button class="bx--btn bx--btn--danger--primary"
aria-label="danger" type="button" disabled>
With icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</button>
<a class="bx--btn bx--btn--danger--primary
" aria-label="danger" type="button"
role="button" href="#">
Link
</a>
<a class="bx--btn bx--btn--danger--primary
bx--btn--disabled bx--disabled"
aria-label="danger" type="button" role="button" tabindex="-1">
Link
</a>
<a class="bx--btn bx--btn--danger--primary
" aria-label="danger" type="button"
role="button" href="#">
Link with icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</a>
<a class="bx--btn bx--btn--danger--primary bx--btn--disabled"
aria-label="danger" type="button" role="button" tabindex="-1">
Link with icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</a>
<p class="bx--btn bx--btn--danger--primary
" aria-label="danger" role="button"
tabindex="0">
Alternate root node
</p>
<p class="bx--btn bx--btn--danger--primary
bx--btn--disabled" aria-label="danger"
role="button" tabindex="-1">
Alternate root node
</p>
<p class="bx--btn bx--btn--danger--primary
" aria-label="danger" role="button"
tabindex="0">
Alternate root node with icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</p>
<p class="bx--btn bx--btn--danger--primary
bx--btn--disabled" aria-label="danger"
role="button" tabindex="-1">
Alternate root node with icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</p>