Skip to content

Links

Textual supports the concept of inline "links" embedded in text which trigger an action when pressed.

There are a number of styles which influence the appearance of these links within a widget.

Property Description
link-color The color of link text.
link-background The background color of link text.
link-style The style of link text (e.g. underline).
link-hover-color The color of link text with the cursor above it.
link-hover-background The background color of link text with the cursor above it.
link-hover-style The style of link text with the cursor above it.

Syntax

link-color: <COLOR>;
link-background: <COLOR>;
link-style: <TEXT STYLE> ...;
link-hover-color: <COLOR>;
link-hover-background: <COLOR>;
link-hover-style: <TEXT STYLE> ...;

Example

In the example below, the first Static illustrates default link styling. The second Static uses CSS to customize the link color, background, and style.

LinksApp Here is a link which you can click! Here is a link which you can click!

from textual.app import App, ComposeResult
from textual.widgets import Static

TEXT = """\
Here is a [@click='app.bell']link[/] which you can click!
"""


class LinksApp(App):
    def compose(self) -> ComposeResult:
        yield Static(TEXT)
        yield Static(TEXT, id="custom")


app = LinksApp(css_path="links.css")
#custom {
    link-color: black 90%;
    link-background: dodgerblue;
    link-style: bold italic underline;
}

Additional Notes

  • Inline links are not widgets, and thus cannot be focused.

See Also