Button

Overview

Buttons are used to initialize an action, their labels should express what action will occur when the user interacts with it.

Buttons make common call-to-actions more obvious and help users easily perform them. Buttons use labels and sometimes iconography to communicate the action that will occur when the user interacts with them. Button labels should always express what the user will achieve by interacting with it.

When to use

• Use buttons to communicate actions users can take to interact with their current view. Each view should only have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.

When not to use

• Do not use buttons as navigational elements. Instead, use XComponent when the desired action is to take the user to a new page.
• There are multiple variations of our button component to allow for different variations of visual loudness and perceived intent.This allows designers to balance visual priority of content throughout the interface.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Button

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Icon Position

ButtonIconPosition

type ButtonIconPosition = typeof buttonIconPositions[number];

end

Defines whether an icon is shown, at the start or end of the label or only an icon is shown instead of a label. (irrespective of language direction).

 

startendonlynone

Icon

Icon

type Icon = typeof icons[number];

Defines whether an icon is shown and which icon to display.

 

alertarrow-downarrow-leftarrow-rightarrow-upbellcalendarchartchevron-downchevron-leftchevron-rightchevron-upcircle-outlinecircle-solidclockcopycross-smallcrossdeletedevicedownloadediteditoreye-openeye-slashexternalfiltergrid-dots-verticalgrid-fullgrid-half-horizontalgrid-half-verticalgrid-one-by-twogrid-two-by-twohaltheart-rateinfolaunchlinkloadinglockloginlogoutlungsmailmenuminusmorenotificationphonepluspreferencesprofilequestionreceiptredorefreshreloadsearchsettingssign-postsorting-ascsorting-descsupporttemperaturetickundouploaduserusers

Kind

ButtonKind

type ButtonKind = typeof buttonKinds[number];

secondary

Describes the hierarchy and intent of the button

 

primaryprimary:positiveprimary:destructivesecondaryrepeatertertiary

Label

string

Required

The text label of the button.

 

Loading

boolean

false

The loading state of the button

Toggle Prop

Render As

ButtonRenderType

type ButtonRenderType = typeof buttonRenderTypes[number];

button

Defines how the button is rendered.

 

buttona

Size

ButtonSize

type ButtonSize = typeof buttonSizes[number];

large

The size of the button.

 

tinysmallmediumlarge

Title

string

The title attribute for the button

 

Type

string

Defines the type attribute if rendered as a button. e.g 'button' or 'submit'.

 

Kinds

There are different kinds of buttons for different contexts and levels of emphasis.

Primary buttons

Primary buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to the current view.

Secondary buttons

Secondary buttons are the medium-emphasis buttons. They are the most common kind, they generally contain actions which are important, but are not the primary action of the current view. If there are multiple items on a view that have their own key action then a secondary button is the right fit.

Tertiary buttons

Tertiary buttons are typically used for less-pronounced actions, including those that are located in things such as dialogs, cards, supporting content, and where the action is of less importance or optional.

In cards or when supporting content tertiary buttons help maintain an emphasis on the content rather than the action.

All kinds

<template>
  <DocExample>
    <MedKitButton label="Primary" kind="primary" />
    <MedKitButton label="Primary:Positive" kind="primary:positive" />
    <MedKitButton label="Primary:Destructive" kind="primary:destructive" />
    <MedKitButton label="Secondary" kind="secondary" />
    <MedKitButton label="Tertiary" kind="tertiary" />
    <MedKitButton label="Repeater" kind="repeater" />
  </DocExample>
</template>

Repeaters

These are a special style of button reserved for UI where new elements are added to the view. They should always be clearly labelled as to what the element that they're adding to a view.

In some cases it may be necessary to have repeaters within repeaters. Nested repeaters such as these should always use the medium size. By changing the size, the style of the repeater will automatically change.

<template>
  <DocExample>
    <MedKitButton label="Add item" kind="repeater" size="large" icon="plus" />
    <MedKitButton label="Add item" kind="repeater" size="medium" icon="plus" />
  </DocExample>
</template>

Examples

Name 

Age 

Date of birth 

Sizes

Buttons are available in multiple sizes, the most commonly used of which is 'Large' (the default). Large matches the size of most common form elements in MedKit. We have many existing cases in our software where 'Medium' is also used. However 'Small' and 'Tiny' buttons are far less common and represent limitations in terms of safe hit target sizes so we recommend avoiding them where possible.

<template>
  <DocExample>
    <MedKitButton label="Large" size="large" />
    <MedKitButton label="Medium" size="medium" />
    <MedKitButton label="Small" size="small" />
    <MedKitButton label="Tiny" size="tiny" />
  </DocExample>
</template>

Loading state

When loading a page the button provides a loading state to use when a short loading period is expected upon the user clicking on the button. This is the preferred method over hiding, disabling or changing the button for another component.

Figma Library

You can find the component in our MedKit Figma library.