Skip to content

Button Specification

Tacho Zhelev edited this page Apr 10, 2019 · 2 revisions

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.
  • displayDensity - Set the button display density (defaults to 'comfortable').

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.
Clone this wiki locally
You can’t perform that action at this time.