function / @typed/ui/Separator

Separator

Renders a non-interactive semantic division.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Structure and naming
Since
1.0.0

Import

import { Separator } from "@typed/ui/Separator";

Signatures

export declare function Separator<const Options extends SeparatorOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SeparatorInternalProps<Options>>, "", Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Examples

import { html } from "@typed/template";
import { Heading } from "@typed/ui/Heading";
import { Separator } from "@typed/ui/Separator";

export const AccountSummary = html`<section>
    ${Heading({ level: 2, content: "Account summary" })}
    <p>Personal account</p>
    ${Separator({ props: { class: "summary-divider" } })}
    <p>Next renewal: September 30</p>
  </section>`;

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source