custom text for PaginationPrevious and PaginationNext without removing icon

[LukasLohmar]

the PaginationPrevious and PaginationNext component allows for custom content by setting textContent but it will remove the icon (since its an JSX attribute). it would be great to have a field on PaginationPreviousProps and PaginationNextProps to set custom text content.

[sek-consulting]

Hi Lukas, thanks for your suggestion but to keep it as close as possible to the kobalte base components I won't add extra props. If you want to change the text but keep the icons just make sure you also add them as children.

This should already work right now:

<PaginationNext>
  Next
  <IconNext />
</PaginationNext>

If not please let me know and I'll change it. :)

[LukasLohmar]

Thank you for your fast answer. Your suggestion is way better than adding extra props. Your example did not work, tho. I think the children weren't passed down to the PaginationNext or PaginationPrevious component.

const PaginationNext = <T extends ValidComponent = "button">(
  props: PolymorphicProps<T, PaginationNextProps<T>>
) => {
  const [local, others] = splitProps(props as PaginationNextProps, ["class"])
  return (
    <PaginationPrimitive.Next
      class={cn(
        buttonVariants({
          variant: "ghost"
        }),
        "gap-1 pl-2.5",
        local.class
      )}
      {...others}
    >
      <span>Next</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="size-4"
      >
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </PaginationPrimitive.Next>
  )
}

[sek-consulting]

it's fixed now :) https://github.com/sek-consulting/solid-ui/blob/main/apps/docs/src/registry/ui/pagination.tsx