Button
Buttons are used to express actions.
Materialize describes three types of buttons: raised, floating and flat.
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
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>