How to have multi-line text in pn.widgets.Button

Showcase
1

Through CSS
image

import panel as pn

pn.extension()

button = pn.widgets.Button(
    name="Click me",
    button_type="primary",
    width=200,
    height=100,
    stylesheets=[
        """
        .bk-btn.bk-btn-primary::before {
            content: "Before content";
            display: block;
            font-size: 50%;
            text-align: left;
        }
        .bk-btn.bk-btn-primary {
            background-color: lightgray;
            font-size: 2em;
            text-align: left;
        }
        .bk-btn.bk-btn-primary::after {
            content: "This text will be on a new line.";
            display: block;
            font-size: 50%;
            text-align: left;
        }
        """
    ],
)

pn.Row(button).show()
1 Like
2

image
image770×344 6.61 KB

To add a centered icon:

import panel as pn
from panel.io.resources import CSS_URLS

if CSS_URLS["font-awesome"] not in pn.config.css_files:
    pn.config.css_files.append(CSS_URLS["font-awesome"])

pn.extension()

button = pn.widgets.Button(
    name="Click me",
    button_type="primary",
    width=200,
    height=100,
    stylesheets=[
        """
        :host(.solid) .bk-btn.bk-btn-primary {
            position: relative;
            background-color: grey;
            font-size: 2em;
            text-align: left;
            padding-left: 25%;
            font-weight: 350;
        }
        .bk-btn.bk-btn-primary::before {
            content: "\\f121"; /* Unicode for Font Awesome code icon */
            font-family: "Font Awesome 5 Free"; /* Specify the Font Awesome font */
            font-weight: 600; /* Ensure the correct font weight for the icon */
            -webkit-text-stroke: 1px grey;
            position: absolute;
            top: 50%;
            left: -40%;
            transform: translateY(-50%) scale(0.8); /* Adjust scale for thinner appearance */
            width: 100%;
            text-align: center;
            font-size: 1em;
            color: white;
        }
        .bk-btn.bk-btn-primary::after {
            content: "This text will be on a new line.";
            display: block;
            font-size: 50%;
            text-align: left;
            font-weight: 50%;
        }
        """
    ],
)

pn.Row(button).show()
1 Like