carbon-components
Version:
Carbon Components is a component library for IBM Cloud
85 lines (82 loc) • 2.96 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--ghost bx--btn--sm"
type="button">
Button
</button>
<button class="bx--btn bx--btn--ghost bx--btn--sm"
type="button" disabled>
Button
</button>
<button class="bx--btn bx--btn--ghost bx--btn--sm"
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--ghost bx--btn--sm"
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--ghost
bx--btn--sm" type="button"
role="button" href="#">
Link
</a>
<a class="bx--btn bx--btn--ghost
bx--btn--sm bx--btn--disabled bx--disabled"
type="button" role="button" tabindex="-1">
Link
</a>
<a class="bx--btn bx--btn--ghost
bx--btn--sm" 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--ghost bx--btn--disabled bx--btn--sm"
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--ghost
bx--btn--sm" role="button"
tabindex="0">
Alternate root node
</p>
<p class="bx--btn bx--btn--ghost
bx--btn--sm bx--btn--disabled" role="button" tabindex="-1">
Alternate root node
</p>
<p class="bx--btn bx--btn--ghost
bx--btn--sm" 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--ghost
bx--btn--sm bx--btn--disabled" 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>