Button Directive

Overview

The button directive offers four styling alternatives to standard HTML buttons. Each button style offers four color variations that can be modified and extended through custom CSS.

Required Imports

To use the button directive in your component, you must import the ButtonDirective from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {ButtonDirective} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
  imports: [ButtonDirective],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

To use the button directive, apply it to your <button> HTML element and optionally set the type and color of the button.

<button coButton="type" color="color">Button Label</button>

Valid values for the coButton parameter are "default", "raised", "stroked" or "icon". Omitting the coButton parameter will default the value "default".

The color parameter can accept any of the MPage Developer standard color names along with custom names you may define. The standard color names are "default", "primary", "accent" and "warn". Omitting a color parameter will use the default color. You can change these values by modifying the specialty colors in your "styles.scss" file.

Customizing Buttons

Styling

The default button colors use the four standard specialty colors defined in "styles.scss" in your project template. These colors include default, primary, accent, and warn. Button colors make use of the alternate colors defined in the specialty colors when hovering over the buttons.

More information on general MPage styling can be found on the main Components & Directives page.

The table below describes the styles specific to the Button directive that you can customize. These changes are global to your MPage. If you are building a component to be used in the Cerner MPage Component Framework, these styles are specific to your component and changes will have no impact to other Clinical Office components displayed on the same page.

Custom Button Color Names

You can create new button color names by adding your definitions to "styles.scss" in your project. Creating a new color requires as specific SCSS naming format. The format is ".co-button-your-color-name-color". Your color definition should include settings for both icon buttons and non-icon buttons.

The example below creates a new color named ".co-button-green-color" and can be applied with the color value of "green".

<button coButton color="green">Green Button Label</button>

/* Custom Button Green Color Scheme */
.co-button-green-color {
  // Non-Icon Button
  &:not(.co-icon-button) {
    background: forestgreen;
    color: white;
  }

  // Icon Button
  &:is(.co-icon-button) {
    color: forestgreen;
  }

  &:hover {
    // Non-Icon Button
    &:not(.co-icon-button) {
      background: #074507 !important;
      color: white !important;
    }

    // Icon Button
    &:is(.co-icon-button) {
      color: #074507 !important;
    }
  }
}

Custom Button Definitions

Custom button definitions are also created with custom SCSS values. As with the color definition, the naming is critical. Your style name must be in the format of "button.co-style-name-button".

Inside your style definition, you can apply whatever style you desire.

In our example below, we are going to use the border-radius property to create a button that looks like a leaf. This definition will be called "button.co-leaf-button". If we wanted to use this new button style along with our custom green color, our HTML button element would appear as follows.

<button coButton="leaf" color="green">Green Button Label</button>

/* Custom Leaf Button Additional Styling */
button.co-leaf-button {
  border-radius: 8rem 0;
  box-shadow: var(--button-shadow);

  &:enabled:hover {
    box-shadow: var(--button-shadow-alternate);
  }
}