Button Micro

Underlined text, no border, no surface. For the links that sit beside content rather than in front of it.

API

Props

prop	type	default
`as?`	`ElementType`	`"button"`	the element or component to render
`active?`	`boolean`	`false`	current state, drawn in the accent colour
`onClick?`	`MouseEventHandler`	`—`	called on click, before onClickBlur
`onClickBlur?`	`MouseEventHandler`	`—`	called on click, then the control loses focus 150ms later
`…rest`	`props of as`	`—`	typed against the chosen element

Examples

Usage

tsx

<ButtonMicro onClickBlur={reset}>clear filters</ButtonMicro>

<ButtonMicro as="a" href={href} rel="noreferrer" target="_blank">
  changelog
</ButtonMicro>

<ButtonMicro active>current</ButtonMicro>

changelog

As an index

Stacked and right aligned, it is the table of contents on the side of these pages: the current entry carries active, and the accent colour marks where you are.

tsx

<ul className="flex flex-col items-end gap-1">
  <List
    array={sections}
    itemExtractor={({ row, index }) => (
      <li key={row}>
        <ButtonMicro as="a" href={`#${row}`} active={index === current}>
          {row}
        </ButtonMicro>
      </li>
    )}
  />
</ul>

Details

Why a component and not a class

Because it carries behaviour, not only looks: the same click-then-blur of Button, an active state, and the polymorphism that lets it be a button, an anchor or a router link without the call site restating the same classes every time.

Active is visual

As everywhere in the kit, active paints and nothing more. When it means "the section you are reading" or "the current page", say so with aria-current as well.

tsx

<ButtonMicro as="a" href={`#${id}`} active={id === current} aria-current={id === current ? "true" : undefined}>
  {label}
</ButtonMicro>