Kobweb is an opinionated framework. What is the op...

# kobweb

[Ahmed Riyadh]

Kobweb is an opinionated framework. What is the opinionated way to create a link button for opening external links?

[Ahmed Riyadh]

Looking at

• Kobweb Site LinkButton rememberPageContext().router.navigateTo() (usage of this composable).
• Kobweb Default App Template Button rememberPageContext().router.navigateTo() Example
They both depend on rememberPageContext
which ships JS code in the statically generated site.

I prefer using the Anchor element (<a>) instead of depending on JS for the following reasons:

1. Functional in case JS is disabled, this is useful for static sites like landing pages.
2. Accessibility and SEO friendly.
3. Natively supported by the browser with better integration.
It gives a better feeling if small details are a priority, for example, right-clicking on the GitHub button of kobweb.varabyte.com doesn't show the open link actions in the menu, whereas if it's Anchor element, it shows Open Link in New Tab (see the images). The browser indicates that it's a general button and not a link button.

Browser integration is a nice feature to have; it's a reason why I prefer Compose HTML over Compose for Web. Are there reasons why Kobweb site doesn't use the anchor element (<a>)?

Example code with Kobweb Silk button style:

// Set the tab index to -1 to ensure pressing the tab key using the keyboard navigates directly to the button and ignores the anchor element.

Link(path = "<https://kobweb.varabyte.com/>", modifier = Modifier.tabIndex(-1)) {
                        Button(onClick = { // No op }, colorScheme = ColorSchemes.Blue) {
                            Text("Kobweb")
                        }
                    }

// NOTE: This approach is an example and is not production-ready.

[Ahmed Riyadh]

Right-clicking on a link button without using the anchor element

[Ahmed Riyadh]

Right-clicking on a link button that uses the anchor element.

[Ahmed Riyadh]

AFAIK, nesting a button element inside the anchor element is not recommended in HTML. Is using the anchor element directly with the button style a better approach? Since the Button widget seems to be a form component (com.varabyte.kobweb.silk.components.forms.Button) which is equivalent to the HTML button element.

[okarm]

Yes, always use <a> for external links. For internal links too, if the perceived distance to the destination in terms of functionality is "far" (for some definition of far)

[S.]

You want to use Links/Anchor elements whenever you can. just use the kobweb Link and provide it with a variant that's styled to look like a button

[S.]

and do never nest buttons and links

[S.]

val ButtonLinkVariant = LinkStyle.addVariant(@Composable { ButtonStyle.toModifier() }) {
    anyLink {
        Modifier.color(Theme.white)
            .textDecorationLine(TextDecorationLine.None)
    }
    base {
        Modifier.padding(topBottom = 9.px, leftRight = 1.2.cssRem)
    }
}

I'm using something like this to make Links look like buttons

[Ahmed Riyadh]

Thanks for the reply!

There are Anchor and Link (both are Kobweb specific) and the A (HTML Anchor), and I'm interested in knowing why the Kobweb site (kobweb.varabyte.com) doesn't use the anchor for a link button.

I'm using something like this to make Links look like buttons

Your solution works great, the navigation and the hovering is equivalent to the Button widget and it still has the benefits of the anchor element.

Modifier.padding(topBottom = 9.px, leftRight = 1.2.cssRem)

Another way to center the text while using the current text color (to override the anchor default text color):

val ButtonLinkVariant = LinkStyle.addVariant(@Composable { ButtonStyle.toModifier() }) {
    anyLink {
        Modifier.color(Color.currentColor)
            .textDecorationLine(TextDecorationLine.None)
    }
    base {
        Modifier
            .display(DisplayStyle.Grid)
            .placeItems(AlignItems.Center, JustifyItems.Center)
            .textAlign(TextAlign.Center)
    }
}

The preference is to use an opinionated solution for consistency that has strong reasons which is important for long-term open-source projects.

[S.]

I don't think the official kobweb site is a big priority atm, so there aren't too many resources spent; I wouldn't expect it to be best practices currently.
And yes I should probably rework the centering part, that code snippet is quite old, thanks

[David Herman]

> I'm interested in knowing why the Kobweb site (kobweb.varabyte.com) doesn't use the anchor for a link button.
It's a totally fair and perceptive question.

I actually did not write a lot of the site. In the early days, there were two of us; I was cranking out the framework and the other person was working on more producer-like aspects of the project. (They've since moved on.) They also put the site together when Kobweb was still barely coherent and changing a lot (and we were still learning a lot about all sorts of web dev nuances).

As I go through the site, I do clean things up as I stumble upon them, but I cannot always promise best practices are used on the site at this point. I haven't done a full audit. And as S. mentions, it's not been a priority compared to getting Kobweb to 1.0.

But I am working on the docs site right now, so since you've pointed it out, I'll review that code because, you're right, people will probably use it expecting they can use it as a template for their own projects.

[Ahmed Riyadh]

Thanks for the clarification; it makes sense.