A simple button-like pagination section to display navigation for post listings.


  • --sm: smaller display version.
  • --lg: larger display version.

Technical Details

  • We style and mark the current page with aria-current='page'.
  • We use <nav> element to mark the navigation.
  • We use the generate-btn and btn-variant mixin to create a similar appearance to the standard button.
  • You should add the colors to your config file.


For this component there are some extra variables at the config page like you see it below.

$colors: (
'btn': (
'pagination-background': hsl(263deg 40% 96%),
'pagination-background-hover': hsl(262deg 71% 49%),
'pagination-foreground': hsl(262deg 71% 49%),
'pagination-foreground-hover': hsl(0deg 0% 100%),
'pagination-focus-ring': hsl(262deg 71% 49%),