55 lines
3.2 KiB
HTML
55 lines
3.2 KiB
HTML
|
<p>Default button styles</p>
|
||
|
|
<p>
|
||
|
|
<button bs-button>Button</button>
|
||
|
|
<button bs-button="size-small">Button Small</button>
|
||
|
|
<button bs-button="size-small" disabled>Button Small</button>
|
||
|
|
</p>
|
||
|
|
<p>Subtle button styles</p>
|
||
|
|
<p>
|
||
|
|
<button bs-button="subtle">Button</button>
|
||
|
|
<button bs-button="size-small subtle">Button Small</button>
|
||
|
|
<button bs-button="size-small subtle" disabled>Button Small</button>
|
||
|
|
</p>
|
||
|
|
<p>Alternative Subtle button styles</p>
|
||
|
|
<p>
|
||
|
|
<button bs-button="subtle-alt">Button</button>
|
||
|
|
<button bs-button="size-small subtle-alt">Button Small</button>
|
||
|
|
<button bs-button="size-small subtle-alt" disabled>Button Small</button>
|
||
|
|
</p>
|
||
|
|
<hr/>
|
||
|
|
<p>Default buttons with icons</p>
|
||
|
|
<div>
|
||
|
|
<button bs-button="icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
|
||
|
|
<button bs-button="icon-right"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Icon Right</button>
|
||
|
|
<button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
<button bs-button="icon" disabled><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button bs-button="size-small icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
|
||
|
|
<button bs-button="size-small icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
|
||
|
|
<button bs-button="size-small icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
<button bs-button="size-small icon" disabled><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
<p>Subtle buttons with icons</p>
|
||
|
|
<div>
|
||
|
|
<button bs-button="subtle icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
|
||
|
|
<button bs-button="subtle icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
|
||
|
|
<button bs-button="subtle icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
<button bs-button="subtle icon" disabled><svg bs-svg-icon><use xlink:href="#svg-help"></use></svg></button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button bs-button="size-small subtle icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
|
||
|
|
<button bs-button="size-small subtle icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
|
||
|
|
<button bs-button="size-small subtle icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
<button bs-button="size-small subtle icon" disabled><svg bs-svg-icon><use xlink:href="#svg-help"></use></svg></button>
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
<p>Alternative Subtle button styles with icons</p>
|
||
|
|
<div>
|
||
|
|
<button bs-button="size-small subtle-alt icon-left"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Icon Left</button>
|
||
|
|
<button bs-button="size-small subtle-alt icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
|
||
|
|
<button bs-button="size-small subtle-alt icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
|
||
|
|
<button bs-button="size-small subtle-alt icon" disabled><svg bs-svg-icon><use xlink:href="#svg-help"></use></svg></button>
|
||
|
|
</div>
|