create a button with zero visible padding

[davetapley]

I found this a bit confusing:

The spacing between the text and the edges of a button are due to border, not padding. To create a button with zero visible padding, use the border: none; declaration.

Because:

from textual.app import App, ComposeResult
from textual.widgets import Button, Static
from textual.events import Click


class ButtonApp(App):
    CSS = """
    #none {
    border: none;
    }

    #link {
    background: $panel;
    color: $text;
    width: auto;
    padding: 0 1;
    }
    """

    def compose(self) -> ComposeResult:
        yield Button("Default Button")
        yield Static("           ")
        yield Button("Border none", id="none")
        yield Static("           ")
        yield Static("What I wanted", id="link")

if __name__ == "__main__":
    app = ButtonApp()
    app.run()

Stale docs or as designed?

[TomJGooding]

I agree that this note in the Button docs is a little misleading. The default CSS for the Button also has a height and a min-width:

https://github.com/Textualize/textual/blob/main/src/textual/widgets/_button.py#L29-L36

So to create a button with zero visible padding you would actually also need to change these values.

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


class ButtonApp(App):
    CSS = """
    Button {
        margin-bottom: 1;
    }

    #none {
    border: none;
    }

    #link {
    border: none;
    height: 1;
    min-width: 0;
    }
    """

    def compose(self) -> ComposeResult:
        yield Button("Default Button")
        yield Button("Border none", id="none")
        yield Button("What I wanted", id="link")


if __name__ == "__main__":
    app = ButtonApp()
    app.run()