Badges

To use Badges, first import SharedModule in your module.

import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}

Default Badges

Preview

HTML

By Component

<gx-badge class="mb-2 mr-2" type="primary">Primary</gx-badge>
<gx-badge class="mb-2 mr-2" type="secondary">Secondary</gx-badge>
<gx-badge class="mb-2 mr-2" type="success">Success</gx-badge>

By Directive

<span class="mb-2 mr-2" gxBadge="primary">Primary</span>
<span class="mb-2 mr-2" gxBadge="secondary">Secondary</span>
<span class="mb-2 mr-2" gxBadge="success">Success</span>

Link Badges

Preview

HTML

<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="primary">Primary</a>
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="secondary">Secondary</a>
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="success">Success</a>

Pill Badges

Preview

HTML

<gx-badge class="mb-2 mr-2" type="primary" pill>Primary</gx-badge>
<gx-badge class="mb-2 mr-2" type="secondary" pill>Secondary</gx-badge>
<gx-badge class="mb-2 mr-2" type="success" pill>Success</gx-badge>