I am using Material ui Button. this button should hold an image & button-name as its child. i don't want to use as one of the children of my Button, but i want to do it by passing startIcon prop to Button. button should look like:-
i have tried this:-
<Button className={classes.navButtons} startIcon={ZapierIcon}>
Zapier
</Button>
but it is showing path of my image in button instead of actual image....can anyone give some suggestion what i am doing wrong.
Just pass the Avatar in place of icon.
<Button
variant="contained"
color="secondary"
startIcon={<Avatar src={'http://www.wpsimplesponsorships.com/wp-content/uploads/2019/05/cropped-icon-256x256.png'} />}
>
Delete
</Button>
https://codesandbox.io/s/bold-dew-3rl6z
Related
So I am trying to display a message when a button is clicked but what it does is that when the page is loaded it displays message boxes (which should not happen) but it doesn't work on onclick I have attached the screenshots to my code and views.
You need to pass your function to the onClick parameter, not invoke it.
<Button type="primary" shape="round" onClick={() => info()} />
or
<Button type="primary" shape="round" onClick={info} />
I have drawer buttons here and I want to change Icon colors when a user clicks to each button and stays there. Like, if users click 'Dashboard' and are staying in that components, the dashboard button color will be white so that the buttons are indicating where users are in the website
const drawer = (
<div>
<Button
variant='contained'
color='secondary'
onClick={handleToDashboard}
className={classes.customButton}
startIcon={<DashboardIcon style={{ color: 'black' }} />}
>
Dashboard
</Button>
<Button
variant='contained'
color='secondary'
onClick={handleToTest}
className={classes.customButton}
startIcon={<MapIcon />}
>
Map
</Button>
<Divider />
</div>
);
If this component is self-contained – that is, it doesn't load a new route whenever a user clicks a button, and instead remains on the existing page – you should maintain state (using setState if this is a class component or the useState hook for a functional component) that keeps track of whichever button was last pressed. You can update the state in your onClick callbacks and then make your color props conditional – for example:
<Button
variant='contained'
color={this.state.opened === 'map' ? 'white' : 'secondary'}
onClick={handleToTest}
className={classes.customButton}
startIcon={<MapIcon />}
>
If this is part of a navigation bar that handles routing between pages, then you should pass as a prop from whatever component is being displayed the value in the drawer that should be highlighted. So for instance, the Dashboard component could, if it has this drawer as a child, pass a prop telling the drawer that it should render the dashboard button color white.
I'm using Dialog screen for insert data. so I wrote codes to show dialog screen. but when the dialog show, I can't click previous screen. I want to copy from prev screen and paste to dialog screen. please let me know the way. here is my code.
<Button variant="contained" color="primary" onClick={this.handleClickOpen}>
add customer
</Button>
<Dialog open={this.state.open} onClose={this.handleClickClose}>
<DialogTitle>add customer</DialogTitle>
</Dialog>
I am using the react-bootstrap Tab component and wish to include a button in the tab title. To set the text of the title you must pass the desired text as props. I want to include a button to remove the tab, appearing next to the text.
I have tried passing a function that returns the button element, but nothing displays in the tab title.
<Tab eventKey={data.name} title={data.name}>
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}
>X</Button>
<TemplateTabs name={data.name} />
</Tab>
Right now the above code renders the button inside the tab page, whereas the desired location would be in the tab title. The template tabs component is what displays in the tab page. Ideally, I am looking for a way to continue to use the react-bootstrap Tab component, but be able to render the tab title and button to remove the said tab. Below is the documentation for the Tab component I am implementing from react-bootstrap. Please let me know if any more information would be useful.
https://react-bootstrap.github.io/components/tabs/
The documentation says type node: https://react-bootstrap.github.io/components/tabs/#tab-props
So this should work:
<Tab
eventKey={data.name}
title={
<>
{data.name}
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}>
X
</Button>
</>
}>
<TemplateTabs name={data.name} />
</Tab>
I am trying to convert an older Material UI implementation. The Docs are bit laggy.
I get this error. The docs say
Name Type Default Description
children * node The content of the
button.
What does this mean and what do I have to put in my code?
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
</Button>
"children" are what is between the tags:
<Button>we are the children</Button>
Because you don't pass anything - it's undefined. To fix error just add something that React can render, like string:
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
My Button
</Button>;
Looks like they removed the label property and moved it to the children prop.
So you have to put it between the tags e.g.
<Button> here comes the label </Button>
You can always check the demos for the Components. See here