Drift Angular
Search…
Badges
To use Badges, first import SharedModule in your module.
1
import {SharedModule} from '@gaxon/modules';
2
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!

Default Badges

Preview
HTML

By Component

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

By Directive

1
<span class="mb-2 mr-2" gxBadge="primary">Primary</span>
2
<span class="mb-2 mr-2" gxBadge="secondary">Secondary</span>
3
<span class="mb-2 mr-2" gxBadge="success">Success</span>
Copied!
Preview
HTML
1
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="primary">Primary</a>
2
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="secondary">Secondary</a>
3
<a href="javascript:void(0)" class="mb-2 mr-2" gxBadge="success">Success</a>
Copied!

Pill Badges

Preview
HTML
1
<gx-badge class="mb-2 mr-2" type="primary" pill>Primary</gx-badge>
2
<gx-badge class="mb-2 mr-2" type="secondary" pill>Secondary</gx-badge>
3
<gx-badge class="mb-2 mr-2" type="success" pill>Success</gx-badge>
Copied!
Last modified 2yr ago