Usage

import { Pagination } from '@pillar-ui/core'

<Pagination />

Examples

Color

Default

b

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Pagination } from '@pillar-ui/core'

export const PaginationColor = () => {
  return (
    <>
      <Pagination count={10} title="Esc" />
      <Pagination count={10} title="Esc" color="d" />
      <Pagination count={10} title="Esc" color="su" />
      <Pagination count={10} title="Esc" color="w" />
      <Pagination count={10} title="Esc" color="p" />
      <Pagination count={10} title="Esc" color="b" />
      <Pagination count={10} title="Esc" color="se" />
      <Pagination count={10} title="Esc" color="i" />
    </>
  )
}

Variant

Default

soft

Type

'shadow' | 'solid' | 'outline' | 'soft' | 'mixed'

import { Pagination } from '@pillar-ui/core'
import React from 'react'

export const PaginationVariant = () => {
  return (
    <>
      <Pagination count={10} variant="shadow" />
      <Pagination count={10} variant="solid" />
      <Pagination count={10} variant="mixed" />
      <Pagination count={10} variant="soft" />
      <Pagination count={10} variant="outline" />
    </>
  )
}

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

import { Pagination } from '@pillar-ui/core'

export const PaginationCorner = () => {
  return (
    <>
      <Pagination count={10} corner="0" />
      <Pagination count={10} corner="1" />
      <Pagination count={10} corner="2" />
      <Pagination count={10} corner="3" />
      <Pagination count={10} corner="4" />
      <Pagination count={10} corner="5" />
      <Pagination count={10} corner="circle" />
      <Pagination count={10} corner="full" />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Pagination } from '@pillar-ui/core'

export const PaginationSize = () => {
  return (
    <>
      <Pagination count={10} size="1" />
      <Pagination count={10} size="2" />
      <Pagination count={10} size="3" />
      <Pagination count={10} size="4" />
      <Pagination count={10} size="5" />
      <Pagination count={10} size="6" />
      <Pagination count={10} size="7" />
      <Pagination count={10} size="8" />
      <Pagination count={10} size="9" />
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Button */
--button-rad:;
/* Change the default size of the Button */
--button-size:;
/* Change the default size of the Button */
--button-transform:;