Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Pagination

Spacing specification for the pagination component with four lettered callouts (A–D) and pink highlight overlays. Callout A marks the outer left boundary; callout B marks the gap between the Back button and the first page button (0.5 rem); callout C marks the Page input area (1 rem internal spacing); callout D marks the item range label below the page buttons. Vertical padding above and below the row is annotated as 0.75 rem, with 0.5 rem between the page buttons row and the item range row. Horizontal gaps between page buttons are marked at 0.5 rem, 2 rem, and 1 rem.

Value Description Details
A Footer Native UI5: Bar
Background color: --sapPageHeader_Background
Padding: 0.75rem 1rem 1rem 0.75rem
B Buttons (Navigational/Page) Native UI5: Button
Text color: --sapButton_TextColor
Min-height: 2rem
Min-width: 2rem
Max-width: 2rem
Max-height: 2rem
C Input Native UI5: Input
Width: 4rem
D Label Native UI5: Label
Font-family: --sapFontFamily
Font-size: --sapFontSize
Font-weight: Normal
Color: --sapContent_LabelColor