Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(button): add trailing icon support #4325

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

zvonimirr
Copy link

This PR adds a support for a trailing icon on the button component.

Motivation

The motivation mostly stems from the issue I encountered in #4324.
I suppose I'm not the only one that needed an extra icon on their button so this PR adds exactly that.

Related issue

Not necessarily related, but motivated me to open this PR. #4324

Test plan

Import the Button component and add a trailingIcon prop.

@lukaevet
Copy link

lukaevet commented Mar 5, 2024

+1

@sztobar
Copy link

sztobar commented Oct 25, 2024

Wouldn't it be better to rename existing icon prop as startIcon and change trailingIcon to endIcon, just like material-ui does? https://mui.com/material-ui/react-button/#buttons-with-icons-and-label

@sztobar
Copy link

sztobar commented Oct 25, 2024

Wouldn't it be better to rename existing icon prop as startIcon and change trailingIcon to endIcon, just like material-ui does? https://mui.com/material-ui/react-button/#buttons-with-icons-and-label

Ok, my bad. It took me time to notice, that there's an easy way to make icon appear on the right side with contentStyle={{ flexDirection: 'row-reverse' }}: https://callstack.github.io/react-native-paper/docs/components/Button/#contentstyle

@zvonimirr
Copy link
Author

@sztobar correct. Just adding an icon and making it reverse is not a problem for me. The problem arises when I want to have two icons.

See #4324 to see what my original motivation was.

@gedu
Copy link
Contributor

gedu commented Oct 28, 2024

Hey, we follow material design guidelines and 2 icons in a button is a Don't. I can open an internal discussion to see if we want to give better support to it: https://m3.material.io/components/buttons/guidelines#89ba49e3-31b5-47ae-9665-3e7f33452d0f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants