Pagination
Implement seamless pagination with Bramble UI's pagination component. Create user-friendly web interfaces and navigate through content effortlessly.
Usage
import {Pagination} from '@/ui'
const [page, setPage] = useState('1')
return (
<Pagination
size={'base'} // 'sm' | 'base' | 'lg' | undefined
theme={'dark'} // 'dark' | 'light'
results={49} // total results
range={12} // results per page
feedback={true} // show/hide feedback message. show by default
vertical={true} // vertical orientation. false by default
minimal={false} // minimal display
icons={false} // display labels rather than icons
page={page} // current page value
onChange={setPage} // change page value
/>
)
Sizes
Optional. Default size is base
.
size='sm'
Page: 1 of 5
size='base'
Page: 1 of 5
size='lg'
Page: 1 of 5
<Pagination
size={'sm'} // 'sm' | 'base' | 'lg' | undefined
...
/>
Icons
Optional. Icons are displayed by default. To display labels instead set icons={false}
.
Page: 1 of 5
<Pagination
icons={false}
...
/>
Theme
Themes are light
or dark
.
Page: 1 of 5
Page: 1 of 5
<Pagination
theme='dark' || 'light'
...
/>
Vertical
<Pagination
vertical={true}
feedback={false} // remove feedback
...
/>
Feedback
Feedback message is displayed by default. To hide use feedback={false}
.
<Pagination
feedback={false} // remove feedback
...
/>
RTL
Minimal
Minimal layout displays only next and previous buttons.
<Pagination
minimal={true} // add this
...
/>