How to make button with secondary background color?

[format1981]

How to make button with secondary background color?

I expect something like
<ui-button secondary>Label</ui-button>

[elf-mouse]

Hi @format1981 ,

You can overwrite theme color by sass. Like this:

@use '@material/theme/theme-color' with (
  $primary: #6200ee,
  $secondary: #018786,
);

See theme color sass docs

[format1981]

Hi @format1981 ,

You can overwrite theme color by sass. Like this:

@use '@material/theme/theme-color' with (
  $primary: #6200ee,
  $secondary: #018786,
);

See theme color sass docs

Thanx. But i know how to redefine theme colors.
I want to know how to use it in templates.
For example: i need 2 buttons, one of them is primary, other one is secondary.
How to get them?

[format1981]

https://next-material.balmjs.com/#/theme/color

At the top of the page you can see 2 buttons: primary and secondary.
But you can`t see code of this buttons.

[elf-mouse]

https://next-material.balmjs.com/#/theme/color

At the top of the page you can see 2 buttons: primary and secondary. But you can`t see code of this buttons.

You can use $theme.getThemeClass(style) api.

[Kestami]

I'm having a similar issue that's confusing me.

I have a vue component that I can write the following in:

<style lang="scss">
    @use '@material/theme as *;
    
    .myClass {
       background-color: $primary !important
    }

This works fine. However once I try and modify the theme in main.ts:

app.use(BalmUI, { $theme: { primary: "#1d4f91" } });

I can see this new colour work for any BalmUI component, but my component which implements the above scss uses the original theme color.

I imagine this is due to the theme override not modifying '@matieral/theme'.

I think the above $theme.getThemeClass(style) might work, though I can't figure out how to use it.

Any ideas?
Cheers.

[elf-mouse]

Hi @format1981 , @Kestami,

• For global theme

  <ui-button>Secondary theme button</ui-button>

  • Method 1. Sass overwrite

    @use '@material/theme/theme-color' with (
      $primary: #018786 // use secondary color
    );

  • Method 2. BalmUI init

    app.use(BalmUI, {
      $theme: {
        primary: '#018786' // use secondary color
      }
    });

• For local theme

  • Secondary theme button

    <ui-button v-ripple="2" :class="$theme.getThemeClass('secondary')">
      Secondary theme button
    </ui-button>

  • Secondary background color button

    <ui-button
      v-ripple
      :class="[
        $theme.getThemeClass('secondary-bg'),
        $theme.getThemeClass('on-secondary')
      ]"
    >
      Secondary background button
    </ui-button>

[format1981]

Thanx! It helps.

[Kestami]

Also thanks, this helped me too. Maybe I'm being a noob, is there anywhere in the documentation that tells you how to use the "API" section? I would have never guessed that they're used in the way described above. It might be worth adding a bit on the documentation around the general API usage?

[elf-mouse]

@Kestami, thank you for your suggestions, I will gradually update and improve the document :)