STYLED MDL

Buttons

Variations on Material Design buttons.

Default Buttons

/*--- Default Button ---*/
<Button>Default</Button>

/*--- Primary Colored Button ---*/
<Button primary>Primary</Button>

/*--- Accent Colored Button ---*/
<Button accent>Accent</Button>

/*--- Disabled Button ---*/
<Button disabled>Disabled</Button>

Raised Buttons

/*--- Raised Button ---*/
<Button raised>Raised</Button>

/*--- Raised Primary Colored Button ---*/
<Button raised primary>Raised Primary</Button>

/*--- Accent Colored Raised Button ---*/
<Button raised accent>Raised Accent</Button>

/*--- Disabled Raised Button ---*/
<Button raised>Disabled</Button>

Floating Action Buttons

/*--- Default Fab ---*/
<Button fab>
  <Icon name="add" />
</Button>

/*--- Primary Colored Fab ---*/
<Button fab primary>
  <Icon name="add" />
</Button>

/*--- Accent Colored Fab ---*/
<Button fab accent>
  <Icon name="add" />
</Button>

/*--- Disabled Fab ---*/
<Button fab disabled>
  <Icon name="add" />
</Button>

/*--- Mini Fab ---*/
<Button fab mini>
  <Icon name="add" />
</Button>

Icon Buttons

/*--- Icon Button ---*/
<Button icon>
  <Icon name="add" />
</Button>

/*--- Primary Colored Icon Button ---*/
<Button icon primary>
  <Icon name="add">
</Button>

/*--- Accent colored icon button ---*/
<Button icon accent>
  <Icon name="add" />
</Button>

/*--- Disabled Icon Button ---*/
<Button icon disabled>
  <Icon name="add" />
</Button>

Usage

<Button>

PropTypeDefaultDescription
raisedbooleanfalseRenders the button as a raised button
fabbooleanfalseRenders the button as a Floating Action Button. If the button is a FAB, it should contain an icon as its only child
iconbooleanfalseRenders the button as an icon button. If the button is a FAB, it should contain an icon as its only child
primarybooleanfalseRenders the button in the primary color
accentbooleanfalseRenders the button in the accent color
disabledbooleanfalseDisables the button
ripplebooleantrueControls whether or not to display the ripple effect