This is slightly confusing, as enabled flag should be determined by the parent (based on alwaysEnabled and enabledApps). I guess this approach was taken because alwaysEnabled is also used when determining if the button is clickable. It makes some sense, but what if we needed an app that is always disabled?
So I think that instead of alwaysEnabled we should rather have something like readOnly and enabled was always set to true by the parent when alwaysEnabled is true. What do you think?

I don't think we need to specify app prefix. We can just use name, icon and copy.

Please remove this console log

Shouldn't we use colors from our theme?

I don't think this is correct. If we can't find an app in enabledApps then we shouldn't conclude that it is always enabled. Instead we should use alwaysEnabled flag.

can we get these values out of CSS variables instead of hardcoding color values: https://davidwalsh.name/css-variables-javascript

can we get these values out of CSS variables instead of hardcoding color values: https://davidwalsh.name/css-variables-javascript

nit: can we use markup? example: h3, p instead of div?

This is a header. matching element in typeography.css is

.h4,
h4 {
  font-size: var(--xl-font-20);
}
``

same here

can we use padding in the inner element instead of margin?

same here. h5 is the same in typography.css`. I think we still need semi-bold.

Should we include these in https://linear.app/comm/issue/ENG-700/replace-fontawesome-icons-with-swmiconpack?

Just an idea: what do you think about adding a method toggleAppEnabled? This might simplify the code significantly. If you agree, we can do this as a next diff, as this one looks ready.

Just a note: we should avoid using headings just to set text size. If the html document is properly formatted, it shouldn't skip any h level https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Avoid skipping heading levels: always start from <h1>, followed by <h2> and so on

The correct way to use these, is to use headings to mark the content, and CSS to set the size.

We can keep it for now though, as we're violating this rule in a lot of places.

I think we can improve the readability here

We should use our theme