Components

Text & link

Body copy in three inks, four sizes or any Tailwind hue, and the link that sits in it. A link given a generated route stays inside the app; one given a URL is a link the browser follows.

Drawn and behaving as Flux UI's text & link does, measured against its live docs.

Variants

Three inks, or any Tailwind hue.

TextVariantsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextVariantsExample : Component
{
    protected override Component? Render() =>
        [
            Ui.Text.Variant(Ui.TextVariant.Strong)["Strong text color"],
            Ui.Text["Default text color"],
            Ui.Text.Subtle["Subtle text color"],
            Ui.Text.Color(Ui.Color.Blue)["Colored text"]
        ];
}

Live result

Strong text color

Default text color

Subtle text color

Colored text

Size

TextSizesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextSizesExample : Component
{
    protected override Component? Render() =>
        [
            Ui.Text.Lg["Larger text size"],
            Ui.Text["Default text size"],
            Ui.Text.Sm["Smaller text"]
        ];
}

Live result

Larger text size

Default text size

Smaller text

Link

External() opens a URL in a new tab, safely.

TextLinkExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextLinkExample : Component
{
    protected override Component? Render() =>
        Ui.Text[
            "Visit our ",
            Ui.Link.Href("https://rask.sh/docs").External()["documentation"],
            " for more information."
        ];
}

Live result

Visit our documentation for more information.

Link variants

TextLinkVariantsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextLinkVariantsExample : Component
{
    protected override Component? Render() =>
        [
            Ui.Text[Ui.Link.Href("#")["Default link"]],
            Ui.Text[Ui.Link.Href("#").Ghost["Ghost link"]],
            Ui.Text[Ui.Link.Href("#").Subtle["Subtle link"]],
            Ui.Text[Ui.Link.As(Ui.LinkAs.Button)["Create new account →"]]
        ];
}

Live result

Default link

Ghost link

Subtle link

Reference

`Ui.Text`

flux:text

Body copy: a paragraph, or a span with Inline.

Step	Takes	What it does
`.Size(…)`	`Ui.TextSize` Default Sm Lg Xl Each is a step of its own too, unless an HTML tag has its name.	How big it looks. Default when unset.
`.Variant(…)`	`Ui.TextVariant` Default Strong Subtle Each is a step of its own too, unless an HTML tag has its name.	How much it stands out. Default when unset.
`.Color(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	One of Tailwind's hues in place of the variant's ink.
`.Inline()`	`bool`	A <span> rather than a paragraph.

It is one HTML element, so Id, Class, Style, Data, Aria and the events are its steps too.

`Ui.Link`

flux:link

A link in the accent colour, underlined.

Step	Takes	What it does
`.Href(…)`	a route, or a URL string	Where it goes: a generated route to stay in the app, or a URL string to leave it.
`.Variant(…)`	`Ui.LinkVariant` Default Ghost Subtle Each is a step of its own too, unless an HTML tag has its name.	How it shows that it is a link. Default when unset.
`.External()`	`bool`	Opens it in a new tab with rel="noopener noreferrer". Ignored for a route.
`.As(…)`	`Ui.LinkAs` A Button Each is a step of its own too, unless an HTML tag has its name.	The element it renders: a <button> drawn as a link. A when unset.
`.Accent()`	`bool`	Whether it takes the accent colour. On unless false.

It is one HTML element, so Id, Class, Style, Data, Aria and the events are its steps too.