ui.divider

Divider

A horizontal or vertical rule, optionally with a label — to separate without adding another box.

Between settings

A card of rows reads as a list when each row is separated by a line rather than boxed.

Invoice paidWhen a customer settles an invoice.

Weekly digestEvery Monday at 9:00.

Product newsA few times a year, no more.

def setting_row(title: str, text: str, checked: bool) -> None:
    with ui.hstack(gap="md", justify="between"):
        with ui.vstack(gap="none"):
            ui.text(title, weight="medium")
            ui.text(text, size="sm", color="muted")
        ui.switch(checked=checked, name=title.lower().replace(" ", "_"))


def sections() -> None:
    with ui.card(padding="md", classes="w-full max-w-md"), ui.vstack(gap="sm"):
        setting_row("Invoice paid", "When a customer settles an invoice.", True)
        ui.divider()
        setting_row("Weekly digest", "Every Monday at 9:00.", True)
        ui.divider()
        setting_row("Product news", "A few times a year, no more.", False)

With a label

The label sits in a gap in the line — the classic "or" between two ways of signing in.

Sign in to Northwind

or with your email

Work email

def labelled() -> None:
    with ui.card(padding="lg", classes="w-full max-w-sm"), ui.vstack(gap="md"):
        ui.heading("Sign in to Northwind", level=3, size="lg")
        ui.button("Continue with Google", icon_left="chrome", variant="outline",
                  classes="w-full")
        ui.button("Continue with GitHub", icon_left="github", variant="outline",
                  classes="w-full")
        ui.divider(label="or with your email")
        with ui.form_field(label="Work email"):
            ui.input(type="email", placeholder="[email protected]",
                     icon_left="mail")
        ui.button("Send me a link", classes="w-full")

Vertical, inside a row

orientation="vertical" separates items of an hstack.

Opened 2 days ago

14 comments

3 attachments

In review

def vertical() -> None:
    with ui.hstack(gap="sm", wrap=True, justify="center"):
        ui.text("Opened 2 days ago", size="sm", color="muted")
        ui.divider(orientation="vertical")
        ui.text("14 comments", size="sm", color="muted")
        ui.divider(orientation="vertical")
        ui.text("3 attachments", size="sm", color="muted")
        ui.divider(orientation="vertical")
        ui.badge("In review", color="warning", variant="soft", size="sm")

In colour

color= tints the line and its label, to mark a section of a timeline.

Today

Payment of €1,150.00 received from Lumen Studio.

Overdue

INV-2039 for Atlas Freight is 12 days late.

def colored() -> None:
    with ui.vstack(gap="sm", classes="w-full max-w-md"):
        ui.divider(label="Today", color="primary")
        ui.text("Payment of €1,150.00 received from Lumen Studio.", size="sm")
        ui.divider(label="Overdue", color="error")
        ui.text("INV-2039 for Atlas Freight is 12 days late.", size="sm")