Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Default Badges
  • Link Badges
  • Pill Badges

Was this helpful?

  1. Components

Badges

PreviousAlertsNextBreadcrumbs

Last updated 5 years ago

Was this helpful?

To use Badges, first import SharedModule in your module.

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

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

Default Badges

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

<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

<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>