Focus Indicator

html

<div class="fi-demo">
  <button type="button" class="fi-demo__btn fi-demo__btn--outline is-focused" style="--accent:#241430;--thickness:3px;">Continue</button>
  <p class="fi-demo__caption">shown as if keyboard-focused (Tab)&mdash;outline never removed{{unless showFocus}}outline: none with nothing in its place &mdash; keyboard users lose their place

tailwind

<div style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <button type="button" class="fi-tw fi-tw--outline is-focused px-5.5 py-3 rounded-lg border-2 font-semibold cursor-pointer" style="border-color:#241430;background:#FAF7F2">Continue</button>
  <p class="mt-3 text-xs text-[#241430aa]">shown as if keyboard-focused (Tab)&mdash;outline never removed{{unless showFocus}}outline: none with nothing in its place &mdash; keyboard users lose their place

react

export function FocusIndicator({
  label = "Continue",
  style = "outline",
  accent = "#241430",
  thickness = 3,
  showFocus = true,
}) {
  const active = {
    outline: { outline: thickness + "px solid " + accent, outlineOffset: 2 },
    glow: { boxShadow: "0 0 0 " + thickness + "px " + accent + ", 0 0 16px " + accent },
    underline: { boxShadow: "0 " + thickness + "px 0 0 " + accent },
  }[style];
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <button type="button" style={{ padding: "12px 22px", borderRadius: 8, border: "2px solid " + accent, background: "#FAF7F2", fontWeight: 600, cursor: "pointer", ...(showFocus ? active : {}) }}>{label}</button>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430aa" }}>{showFocus ? "shown as if keyboard-focused (Tab)\u2014outline never removed" : "outline: none with nothing in its place \u2014 keyboard users lose their place"}</p>
    </div>
  );
}