Button Area

Makes an entire region of content — like a card — behave as a single clickable control, backed by a real button or link underneath.

Account settings

Manage your profile

Overview

The button area is a container element for an interactive “area” of the page. It’s common to make larger sections of the page (such as individual cards) interactive and respond to user pointer events. The button area provides an accessible way to do this.

Usage

forge-button-area wraps a region of content and connects it to a real <button> or <a> in its button slot (or an existing one elsewhere via target/targetElement), through disabled, so the whole region acts as one clickable control while keeping accessible, keyboard-operable semantics. Clicking anywhere in the area dispatches a click event on the connected button. Use it for card-style regions — a whole card that navigates or selects — rather than for a single, already-obvious control like a plain button.

Rules

Always include a slotted button/anchor, or connect an existing one with target or targetElement.

Give the connected button or link a description of the area's action as its text content.

Keep other interactive elements inside the area reachable and independently operable.

Don't

Don't disable a button area that's connected to an anchor element — disabled has no effect on anchors.

Don't use a button area for a region that's already a single, obvious control — a plain button is simpler.

Basic usage

Slot a <button> into button and lay out the rest of the area’s content in the default slot — the whole area becomes clickable while the button itself stays visually hidden but focusable.

An entire content area acting as a single clickable button.

<forge-card class="p-0 w-[320px] max-w-full">
  <forge-button-area>
    <button slot="button" aria-labelledby="button-heading">
    </button>
    <div class="flex items-center gap-xsmall p-medium">
      <div class="me-auto">
        <div id="button-heading">
          Heading
        </div>
        <div>
          Content
        </div>
      </div>
      <forge-icon-button forge-ignore>
        <forge-icon name="favorite" aria-label="A heart graphic">
        </forge-icon>
      </forge-icon-button>
      <forge-tooltip aria-hidden>
        Favorite
      </forge-tooltip>
      <forge-icon name="chevron_right">
      </forge-icon>
    </div>
  </forge-button-area>
</forge-card>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconChevronRight, tylIconFavorite } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconChevronRight, tylIconFavorite]);
</script>

As a link

Slot an <a> instead of a <button> for a button area that navigates. disabled has no effect when the connected element is an anchor.

A button area wrapping an anchor for navigation.

<forge-card class="p-0 w-[320px] max-w-full">
  <forge-button-area>
    <a slot="button" href="javascript: void(0);" aria-labelledby="button-area-link-heading">
    </a>
    <div class="flex items-center gap-xsmall p-medium">
      <div class="me-auto">
        <div class="text-heading3" id="button-area-link-heading">
          Page title
        </div>
        <div>
          Click anywhere to navigate.
        </div>
      </div>
      <forge-icon name="chevron_right">
      </forge-icon>
    </div>
  </forge-button-area>
</forge-card>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconChevronRight } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconChevronRight]);
</script>

State reflection

The button area watches its connected button’s ARIA attributes and reflects them as CSS states you can style directly on the forge-button-area element: :state(pressed) when the button has aria-pressed="true" (useful for a toggle), and :state(current) when it has aria-current set to any valid value (useful for marking the current item in a navigation list).

Button areas are used to create clickable areas that group related information and actions about a single subject. The button area component wraps any arbitrary content with a `<button>` element to enable accessible, clickable interfaces including nested controls and other complex content.

import "@tylertech/forge/button-area";

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Controls whether the component and associated button element are disabled. This has no effect when the button area is used with an anchor element.
`target`	`target`	`string \| null \| undefined`	`undefined`	The ID of a button or anchor element to use for semantics and functionality.
`targetElement`	—	`TargetElement \| null \| undefined`	`undefined`	A button or anchor element instance to use for semantics and functionality.

Events

Name	Type	Description
`click`	`PointerEvent`	The button area emits a native HTML click event whenever it or its associated button or anchor element is clicked. Add the listener to the `<forge-button-area>` element to receive all events. Note: Set `data-forge-ignore` on any nested buttons or other interactive elements to prevent them from activating the button area.

Slots

Name	Description
`(default)`	Places content within the default (unnamed) slot (main body of the component).
`button`	Places content within a visually hidden slot. A `<button>` or `<a>` element can be placed here to provide accessible semantics and functionality without being visible on the page.

CSS Parts

Name	Description
`::part(root)`	The root container element.
`::part(button)`	The visually hidden slot for the `<button>` or `<a>` element.
`::part(focus-indicator)`	The focus indicator element.
`::part(state-layer)`	The state layer surface element.

CSS Custom Properties

Name	Description
`--forge-button-area-shape`	The border radius of the button area.
`--forge-button-area-selected-color`	The background color of the button area when in the pressed or current states.
`--forge-button-area-cursor`	The cursor.
`--forge-button-area-disabled-cursor`	The cursor when in the disabled state.

Accessible name

Give the connected button or link a concise, descriptive text content for its action — preferably matching the visible text within the area, or a portion of it if that text is long.

Keyboard interaction

Every nested button or link inside the area should be reachable by keyboard navigation, with a visible focus cue.
Pressing Space or Enter while the connected button is focused should activate the area the same way a click would. When the connected element is an <a>, only Enter activates it, matching native link behavior.

Contrast

Verify there’s sufficient contrast between the area’s foreground text and its background to meet WCAG requirements.

Interactive content inside the area

An element nested inside a button area needs the same forge-ignore handling described in nested interactive elements to stay independently clickable instead of triggering the area’s own button.