Button - yii2-materializecss Demo

Raised button

The raised button is the default button used by Materialize. It is designed to give depth to the page.


<?= \macgyer\yii2materializecss\widgets\Button::widget(); ?>


<button type="button" id="w0" class="btn">
    Button
</button>

Rendered result

Applying styles

If no further options are defined, the widget renders the default petrol colored button of Materialize with the default "Button" label.

If you need a tag other than <button> set the property $tagName to your desired value.


// add Waves effect
<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'options' => [
        'class' => 'waves-effect waves-light',
    ],
]); ?>                        
                        
// Change tag, change CSS classes, add title
<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'tagName' => 'div',
    'options' => [
        'class' => 'red darken-1',
        'title' => 'Click me',
    ],
]); ?>


<button type="button" id="w2" class="waves-effect waves-light btn">
    Button with Waves effect
</button>

<div id="w1" class="red darken-1 btn" title="Click me">
    Button
</div>

Rendered result

Button

Setting the label

As a label you can either use plain text or HTML. For additional significance you can even set an icon as label. For further information on icons visit the Icon page.

For either an HTML label to work, set the $encodeLabel property to false.


// Text label
<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'label' => 'Custom label'
]); ?>


<!-- Text label -->
<button type="button" id="w3" class="btn">
    Custom label
</button>

Rendered result


// Label with HTML
<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'label' => 'Custom label with <em>HTML</em>',
    'encodeLabel' => false,
]); ?>


<!-- Label with HTML -->
<button type="button" id="w4" class="btn">
    Custom label with <em>HTML</em>
</button>

Rendered result


// Icon label
<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'label' => 'Add to favorites',
    'icon' => [
        'name' => 'grade',
        'position' => 'left',
    ],
]); ?>


<!-- Icon label -->
<button type="button" id="w5" class="btn">
    <i id="w6" class="material-icons left">grade</i>
    Add to favorites
</button>

Rendered result

Changing button size

Currently Materialize offers two button sizes out of the box: default and large.

To change the size from default to large, set the $large property to true.


<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'label' => 'Large button',
    'large' => true,
]); ?>


<button type="button" id="w7" class="btn btn-large">
    Large button
</button>

Rendered result

Disabling a button

To disable a button, set the $disabled property to true.


<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'label' => 'Disabled button',
    'disabled' => true,
]); ?>


<button type="button" id="w8" class="btn disabled">
    Disabled button
</button>

Rendered result

Floating button

The floating circular button is meant to represent very important actions.
Please see the Fixed Action Button for a special variant of this button type.


<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'options' => [
        'class' => 'btn-floating btn-large'
    ],
    'label' => false,
    'icon' => [
        'name' => 'mode_edit',
    ],
]) ?>


<button type="button" id="w7" class="btn-floating btn-large btn">
    <i id="w8" class="material-icons left">mode_edit</i>
</button>

Rendered result

Flat buttons

Flat buttons are intended to be used within elements which already have depth like cards or Modals.


<?= \macgyer\yii2materializecss\widgets\Button::widget([
    'options' => [
        'class' => ['btn-flat light-green darken-1'],
    ]
]) ?>


<button type="button" id="w9" class="btn-flat light-green darken-1 btn">
    Button
</button>