Button

Required Javascript for this component is at the end of this page.

<Code> 
<!-- Button -->
<button type="button" class="btn btn-indigo">
    Button
</button>
<!-- Unelevated button -->
<button type="button" class="btn btn-indigo unelevated">
    Unelevated
</button>
<!-- Button with icon -->
<button type="button" class="btn btn-indigo">
    Icon <i class="material-icons">thumb_up</i>
</button>
<Code> 
<!-- Large button -->
<button type="button" class="btn btn-indigo btn-lg">
    Large
</button>
<!-- Small button -->
<button type="button" class="btn btn-indigo btn-sm">
    Small
</button>
<!-- Disabled button -->
<button type="button" class="btn btn-indigo" disabled>
    Disabled
</button>
<Code> 
<!-- Outline button -->
<button type="button" class="btn btn-outline-indigo">
    Outline
</button>
<!-- Text button -->
<button type="button" class="btn btn-text-indigo">
    Text
</button>
<!-- Link button -->
<button type="button" class="btn btn-link">
    Link
</button>

Button group

<Code> 
<!-- Horizontal button group -->
<div class="btn-group">
    <button type="button" class="btn btn-indigo">Button</button>
    <button type="button" class="btn btn-indigo">Button</button>
</div>
<!-- Vertical button group -->
<div class="btn-group-vertical">
    <button type="button" class="btn btn-indigo">Button</button>
    <button type="button" class="btn btn-indigo">Button</button>
</div>

File input

<Code> 
<!-- File input -->
<div class="m-file-input">
    <input type="file" name="myfile">
    <button type="button" class="btn btn-dark btn-file">
        <i class="material-icons">attach_file</i> Browse Single</button>
    <label class="files"></label>
</div>
<!-- File input multiple -->
<div class="m-file-input">
    <input type="file" name="myfiles[]" multiple>
    <button type="button" class="btn btn-dark btn-file">
        <i class="material-icons">attach_file</i> Browse Multiple</button>
    <label class="files"></label>
</div>

Javascript

<script>
    $(function() {
        // Add ripple to buttons
        $('.btn').ripple();

        // Initialize File Input
        $('.m-file-input').fileinput();
    });
</script>

If a Button with Ripple is inside a Modal and is already initialized on page load, Redraw it by passing the parameter: 'redraw'.

<script>
    $("#myModal").on('shown.bs.modal', function () {
        // Redraw ripple
        $('.btn').ripple('redraw');
    });
</script>

On this page