Button Demo | <uif-button>

In order for this demo to work you must first build the library in debug mode.

The button comes in multiple flavors, all demonstrated below. The simplest button is the default, known as regular or action button:

This markup:
<uif-button>Click Me!</uif-button>

Renders this:
Click Me!

Button Types

You can also change the type of the button by specifying one of the following types in the button's uif-type attribute:

primary: changes the button to blue (primary color)
command: rendering doesn't have the button rectange... looks more like a link & can have an optional icon in the label
compound: a bigger button, but it can optionally have a description associated with it
hero: a big button without the button rectangle and can include an optional

Disabled Buttons

All buttons can be disabled by simply adding a disabled attribute to the button's opening elemnt.

Buttons as Buttons or Links

Buttons are rendered as <button> elements by default. However if you include a ng-href="" attribute to the opening button element, the directive will render the button as a <a> element instead.

Primary Button

This markup:

<uif-button uif-type="primary">Click Me!</uif-button>

Renders this:
Click Me!

Command Button

This markup:

<uif-button uif-type="command">
  <uif-icon uif-type="plus"></uif-icon>
  Click Me!
</uif-button>

Renders this:
Click Me!

Compound Button

This markup:

<uif-button uif-type="compound">
  Click Me!
  <uif-button-description>a button with a description</uif-button-description>
</uif-button>

Renders this:
Click Me! a button with a description

Hero Button

This markup:

<uif-button uif-type="hero">
  <uif-icon uif-type="plus"></uif-icon>
  Click Me!
</uif-button>

Renders this:
Click Me!