Button Micro

The smallest control the kit has: 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>

previewa button and a link, same shape

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 }) => (
      <li key={row.id}>
        <ButtonMicro as="a" href={`#${row.id}`}>
          {row.label}
        </ButtonMicro>
      </li>
    )}
  />
</ul>

preview

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 four 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>

Micro, Button or Item

A Button is a control with a surface, made to be seen and pressed. An Item is a row in a list. A ButtonMicro is a link in the flow of the page: it takes the space of its text, has no border and no background, and stays out of the way until you look for it — footers, indexes, secondary actions under a form.