Skip to main content

One post tagged with "styling"

Show all Tags

How can I add a custom button type?

· 2 minutes of reading time
Martin Oppitz
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Basically, each component can be freely styled within its HTML structure.

With the help of our designer or the SCSS script, existing themes can be adapted or your own themes can be created.

Button and custom class​

The button/switch has 5 types derived from the design language of the design systems:

  • primary: switch for main action (e.g. save)
  • secondary: switch for secondary action (e.g. cancel)
  • normal/tertiary: switch for tertiary action (e.g. back)
  • danger: switch for "dangerous" actions (e.g. delete)
  • ghost: switch for "inconspicuous" actions (e.g. help)

In addition to these basic types, other types can be added using a custom class. To do this, however, all custom classes must be stored in the CSS of the theme.

In the implementation, a coordinated design system /design language should not be arbitrarily changed or expanded. All defined custom buttons will be already provided when the theme was created and their use is described in the documentation of your own design system.

Store custom class in the theme​

  1. Open Theme Designer
  2. Select theme
  3. Select Button component
  4. Switch to component styling
  5. Enter and save CSS for the custom button (look at primary)
  6. Theme in project übernehmen

Example of custom class loading:

.loading :is(a, button) > kol-span-wc kol-icon {
 animation: spin 2.5s infinite linear;
 display: block;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
 .loading :is(a, button) > kol-span-wc kol-icon {
  animation-duration: 5s;
 }
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

Use custom class​

To switch to custom mode, the property _variant must be set to custom. Thereafter any predefined custom classes can be passed via the property _custom-class.

<kol-button _custom-class="loading" _label="Save" variant="custom"></kol-button>

Style the icon in the button from the outside​

It is possible to transfer an icon style to the button. To do this, the desired style must be passed to the property _icon.

<KolButton
 _icons={{
  left: {
   icon: 'codicon codicon-home',
   style: {
    color: 'red',
    'font-size': '300%',
   },
  },
 }}
 _label="Switch with big red icon"
></KolButton>