@drizm/buttons

A buttons library for Angular.

Features

• A simple and elegant-to-use button component
• Easy to override styles
• Many styles and designs to choose from

Installation

npm install @drizm/buttons

Usage

Import Buttons into your module:

import { NgModule } from '@angular/core';
import { ButtonsModule } from '@drizm/buttons';

@NgModule({
  imports: [
    // ...
    ButtonsModule
  ]
})
export class MyAwesomeModule { }

Import the library styles in your styles.scss:

@import '~@drizm/buttons/scss/styles';

Use the component in your template:

<dzm-button type="button" primary>
  Confirm
</dzm-button>

Note: You need to specify a button style in order for it to display correctly, like in the example above. Check documentation below for more styles.

Documentation

Input Properties

| Property | Type | Description | |---------|---------|------------| |type|"button" or "submit"|The button html element type. Optional.| |content|string|A string containing the button's content. Optional. Alternatively, insert the content straight into the component selector via <dzm-button>Content</dzm-button>.| |disabled|boolean|Whether the button should be displayed as disabled. False by default.|

Button styles

| Style | Example | |---------|------------| |primary|<dzm-button primary></dzm-button>| |secondary|<dzm-button secondary></dzm-button>| |accent|<dzm-button accent></dzm-button>| |danger|<dzm-button danger></dzm-button>|

Button designs

| Design | Example | |---------|------------| |main(filled) - default|<dzm-button></dzm-button>| |outline|<dzm-button outline></dzm-button>| |rounded|<dzm-button rounded></dzm-button>| |text|<dzm-button text></dzm-button>|

Overriding button styles

You can override the default styles by overriding their css variables in :root. Here is a list of them and their default values:

:root {
  --dbtn-color-primary: #0d7377;
  --dbtn-hover-primary: #0f857b;
  --dbtn-active-primary: #0e6b77;

  --dbtn-color-secondary: #00C49A;
  --dbtn-hover-secondary: #00e2b7;
  --dbtn-active-secondary: #009d75;

  --dbtn-color-accent: #FF8A44;
  --dbtn-hover-accent: #ffac49;
  --dbtn-active-accent: #d1693f;

  --dbtn-color-danger: #ce0000;
  --dbtn-hover-danger: #7f0000;
  --dbtn-active-danger: #ee0000;

  --dbtn-text-primary-main: white;
  --dbtn-text-secondary-main: #292929;
  --dbtn-text-accent-main: white;
  --dbtn-text-danger-main: white;

  --dbtn-text-disabled: #777777;
  --dbtn-bg-disabled: #d0d0d0;

  --dbtn-radius-huge: 17px;
  --dbtn-radius-bigger: 7px;
  --dbtn-radius-big: 5px;
  --dbtn-radius-normal: 3px;
  --dbtn-radius-small: 2px;
  --dbtn-radius-circle: 50%;
}