Buttons

Demo

{/* Colored FAB button */}
<FABButton colored>
    <Icon name="add" />
</FABButton>

{/* Colored FAB button with ripple */}
<FABButton colored ripple>
    <Icon name="add" />
</FABButton>

{/* FAB button */}
<FABButton>
    <Icon name="add" />
</FABButton>

{/* FAB button with ripple */}
<FABButton ripple>
    <Icon name="add" />
</FABButton>

{/* Disabled FAB button */}
<FABButton disabled>
    <Icon name="add" />
</FABButton>

{/* Mini FAB button */}
<FABButton mini>
    <Icon name="add" />
</FABButton>

{/* Colored Mini FAB button */}
<FABButton mini colored>
    <Icon name="add" />
</FABButton>

{/* Raised button */}
<Button raised>Button</Button>

{/* Raised button with ripple */}
<Button raised ripple>Button</Button>

{/* Disabled Raised button */}
<Button raised disabled>Button</Button>

{/* Colored Raised button */}
<Button raised colored>Button</Button>

{/* Accent-colored button without ripple */}
<Button raised accent>Button</Button>

{/* Accent-colored button with ripple */}
<Button raised accent ripple>Button</Button>

{/* Flat button */}
<Button>Button</Button>

{/* Flat button with ripple */}
<Button ripple>Button</Button>

{/* Disabled flat button */}
<Button disabled>Button</Button>

{/* Primary colored flat button */}
<Button primary>Button</Button>

{/* Accent-colored flat button */}
<Button accent>Button</Button>

{/* Icon button */}
<IconButton name="mood" />

{/* Colored Icon button */}
<IconButton name="mood" colored />

Configuration

Prop	Type	Effect	Remarks
accent	Boolean	Applies “accent” colors	Optional
colored	Boolean	Applies “colored” colors	Optional
component	String, Element, Function	Specify the custom component to use to render the element	Optional. Default ‘div’
mini	Boolean	Set the button as “mini”	Optional, works only with “FABButton”
name	String	Set the icon name"	Optional, works only with “IconButton”
primary	Boolean	Applies “primary” colors	Optional
raised	Boolean	Applies “raised” button style	Optional, doesn’t work with “FABButton”
ripple	Boolean	Applies “ripple” click effect	Optional