Details [Beta]

For development, import Details from @servicetitan/anvil2/beta. For design, find it in the Anvil2 file.

Beta FeatureThis feature is currently in beta, and needs to be imported from @servicetitan/anvil2/beta.While we hope to minimize breaking changes, they may occur due to feedback we receive or other improvements. These will always be documented in the changelog and communicated in Slack.Please reach out in the #ask-designsystem channel with any questions or feedback!

Details [Beta] extends the stable Details. Behavior, Details.Content, and tokens are the same. Only Details.Summary differs. To move from the stable component, see the migration guide.

Anatomy

Details [Beta] consists of four primary elements that work together to show or hide information when clicked.

Chevron
Label
Attributes (optional)
Body content

Options

Details [Beta] supports the following configurations to describe the summary at a glance.

Label

The label is bold by default and supports two inline markers: *italic* and ==highlight==. Use labelProps.size to change the text scale, and labelProps.moreInfo to add an info button with a tooltip.

Attributes

Attributes are cells that sit on the same grid as the label. Use them to surface status, totals, and quick actions without opening the Details.

Type	Use for
`text`	A `label: value` pair, with the value in bold.
`chip`	A status or count.
`button`	A single action related to the summary.
`menu`	Several related actions.

Behavior

Details [Beta] responds to user interaction the same way as the stable Details, with one addition for attributes. Clicking the label, a text cell, a chip cell, or empty space in the summary row opens or closes the Details. Button and menu cells run only their own action and never toggle the Details. The label wraps when there is not enough room. Attribute cells do not wrap, and a cell beyond the last grid track moves to a new row.

Usage Guidelines

Standard	Requirement
DoSummarize the content with attributes	Show the one or two values a user needs to decide whether to open the Details.
DoMatch `templateColumns` to the content below	Use the same proportions as the content so each cell sits near its column.
Don’tCrowd the summary row	Avoid filling every track. Move secondary actions into a `menu` cell.
Don’tHide essential task information	The same guidance as the stable Details applies. Essential information belongs outside Details.

Use the stable Details when the summary is plain text and needs no attributes.

Content

Content within Details [Beta] should keep the label short and written in sentence case. Capitalize only the first word and proper nouns. Avoid **bold** markup, since the label is already bold.

Keyboard Interaction

Users can navigate Details [Beta] using standard keyboard controls.

Key	Description
Tab	Move to the toggle button, then to the info button and each button or menu cell in order.
Space or Enter	Opens or closes the Details when the toggle button is focused.

Code

Common Examples

Placing cells on the grid

templateColumns defaults to 1fr, which gives the label the whole row. The label takes the first track and each cell takes the next one. Add one track for each cell, and size a track wider for a cell that needs more room.

<Details.Summary
  label="Job pricing"
  templateColumns="1fr auto auto"
  gap="4"
  attributes={[
    { type: "text", label: "Total", value: "$4,820.00" },
    { type: "button", label: "Review", onClick: review },
  ]}
/>

Styling the summary

className and style apply to the summary row. Override colors with the --a2-mod-details-summary-* custom properties set through style. See the migration guide for the full list.

Controlling and grouping

expanded, defaultExpanded, onClick, and Details.Content height props work as they do on the stable Details.

React Accessibility

The summary row is a group labelled by the label text. The toggle button holds the label and sets aria-expanded and aria-controls, so its accessible name is the label alone. The info button, button cells, and menu cells are separate controls outside the toggle button.The info button has the accessible name “More information about” followed by the label.

<Details defaultExpanded={false}>
  <Details.Summary label="Job pricing" />
  <Details.Content>Content here</Details.Content>
</Details>

`Details` Props

Details accepts the same props as the stable Details.

boolean

default:"false"

Controls the default expanded state for uncontrolled details.

boolean

default:"false"

Controls the expanded state for controlled details.

<Details.Summary
  label="Job pricing"
  templateColumns="1fr auto"
  attributes={[{ type: "chip", label: "Open" }]}
/>

`Details.Summary` Props

Details.Summary also accepts button props other than children. They apply to the toggle button, except className and style, which apply to the summary row.

string

required

Text for the first cell, beside the expand arrow. Supports *italic* and ==highlight==.

DetailsSummaryColumnAttribute[]

Cells placed on the grid after the label, each in its own track.

GridProps['gap']

Space between the grid tracks.

DetailsSummaryLabelProps

Options for the label.

GridProps['templateColumns']

default:"1fr"

Grid tracks shared by the label and the attribute cells.

`DetailsSummaryLabelProps`

string

Adds an info button after the label that shows this text in a tooltip. Pressing it does not toggle the Details.

"small" | "medium" | "large" | "xlarge"

default:"\"medium\""

Text scale of the label.

`DetailsSummaryColumnAttribute`

A discriminated union on type.

`DetailsSummaryTextAttribute`

"text"

required

string

Regular-weight text before the value.

"small" | "medium" | "large" | "xlarge"

default:"\"medium\""

string

Bold text after the label. The colon shows only when both label and value are set.

`DetailsSummaryChipAttribute`

ChipProps['label']

required

"chip"

required

ChipProps['color']

`DetailsSummaryButtonAttribute`

string

required

"button"

required

ButtonProps['appearance']

default:"\"secondary\""

ButtonProps['icon']

A bare icon renders before the label. Use { after } to trail it.

ButtonProps['onClick']

Runs on click. The click does not toggle the Details.

`DetailsSummaryMenuAttribute`

DetailsSummaryMenuItem[]

required

Items listed in the menu, in order. Submenus are not supported.

string

required

"menu"

required

`DetailsSummaryMenuItem`

string

required

boolean

Keeps the item in keyboard navigation but prevents selection.

MenuItemProps['onClick']

Runs when the item is selected. The menu then closes.

`Details.Content` Props

Details.Content is the stable component’s. See the stable Details.Content props.

Concepts & Guidelines

Anvil2

Resources

Details [Beta] - Web

Anatomy

Options

Label

Attributes

Behavior

Usage Guidelines

Content

Keyboard Interaction

Code

Common Examples

Placing cells on the grid

Styling the summary

Controlling and grouping

React Accessibility

`Details` Props

`Details.Summary` Props

`DetailsSummaryLabelProps`

`DetailsSummaryColumnAttribute`

`DetailsSummaryTextAttribute`

`DetailsSummaryChipAttribute`

`DetailsSummaryButtonAttribute`

`DetailsSummaryMenuAttribute`

`DetailsSummaryMenuItem`

`Details.Content` Props

​Anatomy

​Options

​Label

​Attributes

​Behavior

​Usage Guidelines

​Content

​Keyboard Interaction

​Code

​Common Examples

​Placing cells on the grid

​Styling the summary

​Controlling and grouping

​React Accessibility

​Details Props

​Details.Summary Props

​DetailsSummaryLabelProps

​DetailsSummaryColumnAttribute

​DetailsSummaryTextAttribute

​DetailsSummaryChipAttribute

​DetailsSummaryButtonAttribute

​DetailsSummaryMenuAttribute

​DetailsSummaryMenuItem

​Details.Content Props

Anatomy

Options

Label

Attributes

Behavior

Usage Guidelines

Content

Keyboard Interaction

Code

Common Examples

Placing cells on the grid

Styling the summary

Controlling and grouping

React Accessibility

`Details` Props

`Details.Summary` Props

`DetailsSummaryLabelProps`

`DetailsSummaryColumnAttribute`

`DetailsSummaryTextAttribute`

`DetailsSummaryChipAttribute`

`DetailsSummaryButtonAttribute`

`DetailsSummaryMenuAttribute`

`DetailsSummaryMenuItem`

`Details.Content` Props