Text

Tags can be applied in line with text.

Tags are inline elements that automatically scale to match the size of the surrounding text.

Skinny Jeans New

<h2>
  Skinny Jeans
  <ma-tag type='primary'>
    New
  </ma-tag>
</h2>
Mustache Wax 6oz.
<h6>
  Mustache Wax
  <ma-tag type='warning'
          [pill]='true'>
    6oz.
  </ma-tag>
</h6>

Tags can use any of the theme's 6 colors: primary, secondary, success, info, warning, or danger. Use the [pill] property to give the rounded edges.

Tags work in the middle of a sentence: AAPL 5.3% announced record earnings today.

Navigation

Tags call attention to navigation items.

Tags may be used to call the user's attention to something that has happened in a different view, e.g. by badging a nav item. Try adding tags to some of the items in the side navigation.

  • About Tag Up Down
  • Layout Tag Up Down
  • Themes Tag Up Down

The following source demonstrates a badged side navigation item.

<ma-side-nav-item>
  <fa name='home'></fa>
  About
  <ma-tag
    type='primary'
    [pill]='true'
    class='float-xs-right'>
      BADGE CONTENT
  </ma-tag>
</ma-side-nav-item>

When a badge appears inside a navigation item, it becomes slightly larger, has a border, and has dark text. Badges are hidden automatically when empty. (This demo checks for a zero count and returns an empty string.)