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'

size='base'

size='lg'

<Pagination
	size={'sm'}   // 'sm' | 'base' | 'lg' | undefined
	...
/>

Icons

Optional. Icons are displayed by default. To display labels instead set icons={false}.

<Pagination
	icons={false} 
	...
/>

Theme

Themes are light or dark.


<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
	...
/>