Button Specification

The igxButton directive should provide a way to use html elements like button, span, div or anchor like a fully functional button.

<span igxButton="raised" igxButtonColor="green" igxButtonBackground="#FFF">
   Click me
<span>

User Stories

Developer

• As a developer I want to be able to provide a way to use and customize button element, and use set different types.
• As a developer I want to be able to to specify a display density for the button from predefined values.

<div igxButton [displayDensity]="'compact'" [options]>Click me!</div>

Acceptance criteria

1. Have button with different color and background color.
2. Have button with different types, like fab, gradient, flat etc.

Functionality

API

• igxButton - Set the type of igxButton to be used. Default is set to flat.
• igxButtonColor - Set the button text color. You can pass any CSS valid color value.
• igxButtonBackground - Set the button background color. You can pass any CSS valid color value.
• buttonSelected - Emitted not only when a button gets selected, but also when it gets deselected.
• selected - Gets or sets whether the button is selected. Mainly used in the IgxButtonGroup component and it will have no effect if set separately. Example:

<button type="button" igxButton="flat" [selected]="button.selected"></button>

• igxLabel - Sets the aria-label attribute. Example:

<button type="button" igxButton="flat" igxLabel="Label"></button>

Button types:

• flat - The default button type. Transparent background and primary theme color for text.
• raised - As the name implies, this button type uses subtle box-shadow. Primary theme color for background and white for text color.
• gradient - Same as the raised button type. Additionally you can specify a gradient value for background color.
• fab - Floating action button type. Circular with primary theme color for background and white text.
• icon - This is the simplest of button types. Use it whenever you need to use an icon as button.
• navbar - Same as the icon button type, albeit optimized for use with the igx-navbar component.