@drizm/buttons v1.2.3

@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

Button styles

Button designs

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%;
}