How would you name this?

Publish Date: Oct 12 '22

1 11

I have to implement this component and have a hard time naming it. Does anyone have an idea?

<PageCarousel>?
<PrevNextControl>?

This happens quite often to me actually and I guess I am not alone.

What is your approach to solving these cases? Is there a place where you can search a library of interface elements and find the correct name?

My default approach is to search for similar comonents in a framework like https://material.io/components. Sometimes I check if the designer has already named it in Figma. Or, if I know another interface/website with that element, I'll see if it has a class name :)

Any input appreciated!

Comments 11 total

vjanovecOct 12, 2022
I would relate the name to "Pagination"
<Page> ? <Pagination> <nextPage> <prevPage>
Check this out
mui.com/material-ui/react-pagination/
- Andreas RiedmüllerOct 12, 2022
  It definitely is a pagination thing. I already have a "real" pagination component so I disregarded this, but yes, you are right.
  
  Something like <MicroPagination> or <MiniPagination> would already be better than what I have.
  
  Or I could use my existing pagination and configure it with showPages={false} or something like that.
  
  Thanks!
Mr. LinxedOct 12, 2022
I've called mine "Pagination" when I developed it. Still seems to me like the best option.
- Andreas RiedmüllerOct 13, 2022
  Yes, if this is your main pagination control it makes sense to call it like that.
  
  In my case I already have a pagination that looke like this:
Jon Randy 🎖️Oct 13, 2022
To me, "Pagination" is not really the best name because its meaning doesn't really describe the control well. I would go with "PageSelector"
- Andreas RiedmüllerOct 13, 2022
  PageSelector, I love it. 🙌
tq-bitOct 13, 2022
1. What does it do? -> Show the current Page -> Provide navigation to other Pages
That's pretty much it Imo.

I'd go for AppPageNavigation. It's more distinctive than the Pagination, but probably not perfectly unambiguous.
- Andreas RiedmüllerOct 13, 2022
  I do like PageNavigation!
Andreas RiedmüllerOct 16, 2022
Why bunny?

In my case it is a React element.

Interesting read though, I think a lot about naming stuff.

I was wondering why it is required to include a hypen and it was explained:

They contain a hyphen, used for namespacing and to ensure forward compatibility (since no elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the future).

Thanks for your comment!

Add comment

Andreas Riedmüller @receter

How would you name this?

Comments 11 total