chromium/ash/webui/personalization_app/resources/js/personalization_toast_element.html

<style>
  /* Override some cr-button variables. */
  #container cr-button {
    --active-shadow-rgb: transparent;
    --border-color: transparent;
    --cr-button-height: 36px;
    --hover-border-color: transparent;
    --hover-bg-color: transparent;
    --hover-bg-action: transparent;
    --ink-color: var(--cros-color-primary-inverted);
    --text-color: var(--cros-color-primary-inverted);
    border: 0;
    margin: 0;
    padding: 8px;
  }

  #container {
    align-items: center;
    background-color: var(--cros-bg-color-elevation-2-inverted);
    border-radius: 4px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    color: var(--cros-text-color-primary-inverted);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 16px;
  }

  p {
    margin: 0;
    margin-inline-end: 16px;
  }
</style>
<template is="dom-if" if="[[showError_]]">
  <div id="container">
    <p>[[getErrorMessage_(error_)]]</p>
    <cr-button on-click="onDismissClicked_">
      [[getDismissMessage_(error_)]]
    </cr-button>
  </div>
</template>