Tag buttons for multiple styles?

General
1

Is there a way to assign a tag to a button widget, or to differentiate certain buttons from each other? I’m wanting to style different kinds of widget buttons so i can colour-code them for more accessibility + customization

1 Like
2

I would also like to see some data tags wherever possible and where it make sense. :slight_smile:

3

I figured out a way to do it :grin:

After looking at Library/Std/Widgets, I’ve managed to make a space-lua function for this, heavily based on the widgets.commandButton funtion:

function widgets.colorButton(commandName, cssClass, text)
  cssClass = cssClass or "custom-default"
  if not text then
    text = commandName
  end
  return widget.html(dom.button {
    onclick = function()
      system.invokeCommand(commandName)
    end,
    class = cssClass,
    text
  })
end

Now I can add some space-style for different button classes, e.g.:

button.blue {
  color: #fff;
  background: #009;
}
button.blue:hover {
  background: #007;
}

And then call something like ${widgets.colorButton("Editor: Toggle Dark Mode", "blue")} to get a blue button that toggles dark mode.

So cool!

2 Likes
4

Probably also worth mentioning: this page mentions the ability to add attributes to items, rather than just frontmatter for an entire page. Not sure if this can really be utilized with space-style, but it’s good to know for querying particular items :slight_smile:

5

I don’t think so. I don’t see any data tag on the attributes in the page HTML code meaning there is no sane way to match them using the CSS selectors because they have just the sb-frontmatter sb-meta or sb-frontmatter sb-atom class attached. I would suggest to add data-tag-key='attribute' and data-tag-value='attribute value' to them and to change the sb-frontmatter to something else because if you hide the frontmatter using CSS on such page all attributes are hidden too (which I fact did and realized right now by accident and will have to fix it).

Something like:

[foo: bar]

will yield

<span class="sb-attribute" data-tag-key="foo" data-tag-value="bar">
    <span class="sb-attribute-opening">[</span>
    <span class="sb-attribute-key">foo</span>
    <span class="sb-attribute-key-value-separator">: </span>
    <span class="sb-attribute-value">bar</span>
    <span class="sb-attribute-closure">]</span>
</span>

CSS selectors then can be used to style, hide, prepend, append, anything you like to do with each part of the attribute. For example: [due: 2025-06-30 10:30] could be displayed with quite simple CSS as for example 📅 2025-06-30 10:30 or based on the data-tag-value data tag one can show different clock icon for different values: 📅 2025-06-30 🕥 10:30. That could be real fun! :slight_smile:

@zef Should we create FR for refactoring the attributes’ rendering?

6

Data attributes for tags has been briefly discussed before, but I don’t think anything has come of it yet.

Just for reference: Tag Styling - #2 by zef

7

And here as well.

8

Whoops, I completely misread the thread so far and the data-attributes for tags exist, just not the values. Apologies for the noise! :smiley: Wonder how hard it would be to extend the parser to also add the attribute for values. :thinking:

9

The general idea is to put data tags in both #hashtags and [attr: ibute]s objects and divide the styling into parts so that the look of both the objects can be changed in any way user wants. That would be for:

  • "[", <key>, ":", <spaces>, <content> and "]" for the attributes,
  • "#", <name> or #<, <name> and ">" for the hashtags.

Each of the part should have it’s own CSS class and the whole object should be also wrapped in a container that will be assigned data tags. (It also can’t be too hard to implement, I think, or hope.)

Luckily we do not need data tags for e.g., hyperlinks (href, alt can be used for matching) which is good, but the opening and closing square brackets should be also styllable.

For me, styling of the hashtags is very important because I #use them as a part of #text I write and really need to make them as less distracting as possible but still distinquishable. The very same applies for the links and the attributes and so on.

Sidenote: for all the cases/objects you need a way to style the “edit mode” and the “view mode” of the objects.