loomElements
Elements are pink's single-purpose building blocks: a button, a card, a tag, a loader. Each takes the shared props plus the handful listed here, and each has a story in Storybook's Elements group. Props are shown as element-syntax attributes; the functional form takes the same names.
`PinkBox` Copy link
A <div class="box"> — pink's padded, bordered surface. children only.
`PinkBoxes` Copy link
A boxes-wrapper around a PinkBox per entry of boxProps — boxes laid out as a group, each entry the props of one box.
`PinkButton` Copy link
The button. Its root is a <button type="button">, or an <a> when href is given; everything pink adds is a class or a variable.
Prop | Effect |
|---|---|
| Anchor root; |
| Button root only. |
| The secondary color scheme. |
| No background or border. |
| Pink's large preset: height, horizontal padding and font size. |
| Sized for an icon with no label. |
| The icon, via |
| Custom height, font size and horizontal padding, as CSS lengths. |
import { component, route } from '@loom-js/core';
import { PinkButton } from '@loom-js/pink';
export const Actions = component(
(html) => html`
<${PinkButton} icon="icon-plus">Create</>
<${PinkButton} href="/docs" onClick=${route} isSecondary>Read the docs</>
<${PinkButton} icon="icon-x" isOnlyIcon isText attrs=${{ 'aria-label': 'Close' }} />
` );`PinkButtonsList` Copy link
A <ul class="buttons-list"> with a PinkButton per entry of itemProps, each in its own <li>; listItemProps reach every <li>. Pass children instead to supply the items yourself.
`PinkCard` Copy link
The card surface. Takes is (default <div>), isBorderDashed for the dashed outline and isAllowFocus to make it a focus target. Theme its background, radius and padding through usePinkTheming.
`PinkCopyButton` Copy link
An icon-only text button that copies text on click — PinkCopyToClipboard with a PinkButton rendered from the copied state, so the icon swaps in place (icon, default icon-duplicate, to copiedIcon, default icon-check) and the tooltip label follows (label, copiedLabel). With href it is an anchor as well as a copy control, native link behavior intact; onClick lands on the button itself, so a router handler works. buttonSize sets the height.
import { component } from '@loom-js/core';
import { PinkCopyButton } from '@loom-js/pink';
export const CopyId = component<{ id: string }>(
(html, { id }) => html`
<code>${id}</code>
<${PinkCopyButton} label="Copy id" text=${id} />
` );`PinkInlineCode` Copy link
A <code class="inline-code"> for a command, identifier or file name inside a sentence. It is a functional composition over el('code') on purpose: pink styles code as white-space: pre-wrap, and the functional form carries no template whitespace to render.
`PinkInlineTag` Copy link
A <span class="inline-tag"> — the small count label inside a button or heading. isInfo for the information color, isDisabled for the muted state.
`PinkTag` Copy link
A <div class="tag"> for categorizing content. Flags: isInfo, isSuccess, isWarning, isDanger, isSelected; isEyebrowHeading (true, or 1–3 for the heading level) renders it as an eyebrow label; icon and appendIcon via withIcon. PinkTag.Tag is the same component with is exposed, for a tag that must be another element.
`PinkInteractiveTag` Copy link
PinkTag as a control: a <button type="button">, or an <a> when href is given, with disabled for the button form. Takes every PinkTag flag.
`PinkLoader` Copy link
The spinner. By default it rotates; with isLoading it becomes a progress ring filled to percent (0–100). isSmall shrinks it, isTransparent removes the track color (ignored while isLoading). The loader class owns the visual, so this is the one element that takes no className.
`PinkStatus` Copy link
A status dot with a label. status is a PinkStatusState — Complete, Failed, Pending, Processing, Warning — and doubles as the label unless text is given.
import { component } from '@loom-js/core';
import { PinkStatus, PinkStatusState } from '@loom-js/pink';
export const DeployState = component<{ ok: boolean }>(
(html, { ok }) => html`
<${PinkStatus}
status=${ok ? PinkStatusState.Complete : PinkStatusState.Failed}
text=${ok ? 'Deployed' : 'Deploy failed'}
/> ` );`PinkTooltip` Copy link
A <button type="button"> that shows a tooltip on hover and focus: withTooltip for the popup (popupMessage, isBottom, isCenter, isEnd, popupClassName) and withIcon for an icon, with isTag to style the button as a tag. For a tooltip on an element of your own, use the withTooltip modifier directly.
PinkTooltipPopup — the bubble itself, a <span role="tooltip" class="tooltip-popup"> with the same placement flags — is exported for components that render their own .tooltip host.