Pagination.js

const List = styled.ul`
  display: flex;
`
const ListItem = styled.li`
  margin-right: 16px;
`

const Example = () => {
  return (
    <nav>
    <List>
      <ListItem>
        <Button size="compressed" href="#" icon="chevron-left">
          First
        </Button>
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#" icon="chevron-left" />
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#">
          1
        </Button>
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#">
          2
        </Button>
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#">
          3
        </Button>
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#">
          4
        </Button>
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#">
          5
        </Button>
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#" icon="chevron-right" />
      </ListItem>
      <ListItem>
        <Button size="compressed" href="#" icon="chevron-right">
          Last
        </Button>
      </ListItem>
    </List>
  </nav>
  )
}

render(Example)