Hyper Elementsv0.3
Get started

Blocks

Button

A link drawn as a button. The Button component's props, styles and an example, in Hyper Elements.

import { Button } from "@hyper-elements/react";

Example

Show the code
button.tsx
import { Button, Column, Email, Row } from "@hyper-elements/react";

export default function Example() {
  return (
    <Email width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Row style={{ gap: 12, justifyContent: "center" }}>
          <Button
            href="https://example.com/start"
            style={{ backgroundColor: "#ef4638", borderRadius: 8, padding: [12, 22], fontWeight: 600, width: 150 }}
            hover={{ backgroundColor: "#d93425" }}
          >
            Get started
          </Button>
          <Button
            href="https://example.com/docs"
            style={{ backgroundColor: "#ffffff", color: "#0f172a", border: "1px solid #cbd5e1", borderRadius: 8, padding: [12, 22], width: 170 }}
            hover={{ backgroundColor: "#f1f5f9" }}
          >
            Read the docs
          </Button>
        </Row>
      </Column>
    </Email>
  );
}

Reference

A link drawn as a button.

Holds: text; Span, MergeTag, LineBreak. Drawn in: email, page.

Props:

  • href: link (required)
  • title: text. Shown as a tooltip by mail clients and browsers that show one.
  • aria-label: text. What a screen reader says for it, where its text alone doesn’t say enough (“Read more about pricing”).
  • attrs: attributes. More attributes for its link: a class, a data- attribute.

style:

  • color: color (default "#ffffff", inherited)
  • fontFamily: fontFamily (inherited)
  • fontSize: a length (a number of px) (default 14, inherited)
  • fontWeight: fontWeight (inherited)
  • fontStyle: one of “normal”, “italic” (inherited)
  • lineHeight: lineHeight (default 1.2, inherited)
  • letterSpacing: a length (a number of px) (inherited)
  • textAlign: one of “left”, “center”, “right”, “justify” (default "center", inherited)
  • textTransform: one of “none”, “uppercase”, “lowercase”, “capitalize” (inherited)
  • textDecoration: one of “none”, “underline”, “line-through”
  • width: a length (a number of px, %)
  • maxWidth: a length (a number of px, %)
  • padding: insets (default {"top":10,"right":20,"bottom":10,"left":20})
  • backgroundColor: color (default "#0879a1")
  • border: border
  • borderRadius: radius (default 4)
  • boxSizing: one of “border-box”, “content-box”. Whether its width holds its padding and border (border-box), or they go on top of it (content-box).
  • alignSelf: one of “start”, “center”, “end”. Where it sits in its stack, whatever the stack’s alignItems: on phones too, another place than on desktop.
  • flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.

hover: color, backgroundColor.

mobile (on phones): fontSize, lineHeight, letterSpacing, textAlign, width, maxWidth, padding, border, alignSelf.