CSS only

Button

Interactive buttons: solid · outline · soft · ghost · link variants, with size and shape scales. SCSS-only, colors from NG tokens.

The button is Nexigrid's base interactive block. The root class is ng-btn; the color is applied with a semantic token (ng-btn-primary, ng-btn-success…) and the style, size and shape modifiers combine freely.

Variants

Five treatments on the same color: solid (default), -outline, -soft, -ghost, -link. The modifier goes after the color.

button.html 
<a class="ng-btn ng-btn-primary">Solid</a>
<a class="ng-btn ng-btn-primary-outline">Outline</a>
<a class="ng-btn ng-btn-primary-soft">Soft</a>
<a class="ng-btn ng-btn-primary-ghost">Ghost</a>
<a class="ng-btn ng-btn-primary-link">Link</a>

Colors

Every color token has its variant — the semantic set plus the extended palette. The color goes right after ng-btn-.

button.html 
<a class="ng-btn ng-btn-primary">Primary</a>
<a class="ng-btn ng-btn-secondary">Secondary</a>
<a class="ng-btn ng-btn-success">Success</a>
<a class="ng-btn ng-btn-info">Info</a>
<a class="ng-btn ng-btn-warning">Warning</a>
<a class="ng-btn ng-btn-danger">Danger</a>
<a class="ng-btn ng-btn-mute">Mute</a>
<a class="ng-btn ng-btn-blue">Blue</a>
<a class="ng-btn ng-btn-blue-sky">Blue Sky</a>
<a class="ng-btn ng-btn-green">Green</a>
<a class="ng-btn ng-btn-lime">Lime</a>
<a class="ng-btn ng-btn-aguagreen">Aguagreen</a>
<a class="ng-btn ng-btn-indigo">Indigo</a>
<a class="ng-btn ng-btn-purple">Purple</a>
<a class="ng-btn ng-btn-purple-heart">Purple Heart</a>
<a class="ng-btn ng-btn-cyan">Cyan</a>
<a class="ng-btn ng-btn-magenta">Magenta</a>
<a class="ng-btn ng-btn-yellow">Yellow</a>
<a class="ng-btn ng-btn-clight">Clight</a>
<a class="ng-btn ng-btn-cdark">Cdark</a>

Sizes

Four sizes via the xs, sm, lg modifiers (medium is the default, no modifier).

button.html 
<a class="ng-btn ng-btn-primary xs">Extra small</a>
<a class="ng-btn ng-btn-primary sm">Small</a>
<a class="ng-btn ng-btn-primary">Medium</a>
<a class="ng-btn ng-btn-primary lg">Large</a>

Shapes

Radius shape with rect (sharp corners), quad (square-ish, master radius) and circle (truly round, 50% radius).

button.html 
<a class="ng-btn ng-btn-primary rect">Rect</a>
<a class="ng-btn ng-btn-primary quad">Quad</a>
<a class="ng-btn ng-btn-primary circle" aria-label="Add"><i class="ph ph-plus"></i></a>

Reference

Metadata generated from the component source (_ng_button.scss) — always aligned with the framework.

Component info

NameButton
Typecss
Version1.0.2
Statuscss
CSS/assets/css/components/_ng_button.scss

Classes

.ng-btn .ng-btn- .ng-btn-grad .ng-btn-group .ng-btn-group- .ng-btn-group-lg .ng-btn-group-md .ng-btn-group-sm .ng-btn-split .ng-btn-split-bare .ng-btn-split-icon

Tokens

--ng-btn-border-width --ng-btn-disabled-opacity --ng-btn-focus-offset --ng-btn-focus-outline --ng-btn-font-size --ng-btn-font-weight --ng-btn-line-height --ng-btn-padding-x --ng-btn-padding-y --ng-btn-radius --ng-btn-spinner-border --ng-btn-spinner-size --ng-btn-spinner-speed --ng-btn-transition