[material-ui][docs] Revise the Button page #40446
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| export default function DisableElevation() { | ||
| return ( | ||
| <Stack spacing={2} direction="row"> | ||
| <Button variant="contained">Default</Button> | ||
| <Button variant="contained" disableElevation> | ||
| Elevation disabled | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| export default function DisableElevation() { | ||
| return ( | ||
| <Stack spacing={2} direction="row"> | ||
| <Button variant="contained">Default</Button> | ||
| <Button variant="contained" disableElevation> | ||
| Elevation disabled | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| <Button variant="contained">Default</Button> | ||
| <Button variant="contained" disableElevation> | ||
| Elevation disabled | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| export default function DisabledButton() { | ||
| return ( | ||
| <Stack spacing={2} direction="row"> | ||
| <Button variant="outlined">Default</Button> | ||
| <Button variant="outlined" disabled> | ||
| Click disabled | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| export default function DisabledButton() { | ||
| return ( | ||
| <Stack spacing={2} direction="row"> | ||
| <Button variant="outlined">Default</Button> | ||
| <Button variant="outlined" disabled> | ||
| Click disabled | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| <Button variant="outlined">Default</Button> | ||
| <Button variant="outlined" disabled> | ||
| Click disabled | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| export default function FullWidthButton() { | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| width: '300px', | ||
| border: '1px solid gray', | ||
| borderRadius: '5px', | ||
| padding: '5px', | ||
| }} | ||
| > | ||
| <Button variant="contained" fullWidth> | ||
| Full width button | ||
| </Button> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,20 @@ | ||||||||||||||||||||||||||||||||||
| import * as React from 'react'; | ||||||||||||||||||||||||||||||||||
| import Box from '@mui/material/Box'; | ||||||||||||||||||||||||||||||||||
| import Button from '@mui/material/Button'; | ||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||
| export default function FullWidthButton() { | ||||||||||||||||||||||||||||||||||
| return ( | ||||||||||||||||||||||||||||||||||
| <Box | ||||||||||||||||||||||||||||||||||
| sx={{ | ||||||||||||||||||||||||||||||||||
| width: '300px', | ||||||||||||||||||||||||||||||||||
| border: '1px solid gray', | ||||||||||||||||||||||||||||||||||
| borderRadius: '5px', | ||||||||||||||||||||||||||||||||||
| padding: '5px', | ||||||||||||||||||||||||||||||||||
| }} | ||||||||||||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||||||||||
|
Comment on lines
+7
to
+14
There was a problem hiding this comment. To get the inline preview?
Suggested change
There was a problem hiding this comment. I was about to suggest whether we need the 300px width limit there... I think we can make this one span the full demo container width, given it's illustrating the There was a problem hiding this comment.
A direction that makes sense to me:
Edit: actually, more padding y than padding x could make it 🤌 There was a problem hiding this comment. Not sure about the background, though; it looks cleaner without it (plus all the other demos don't use it). |
||||||||||||||||||||||||||||||||||
| <Button variant="contained" fullWidth> | ||||||||||||||||||||||||||||||||||
| Full width button | ||||||||||||||||||||||||||||||||||
| </Button> | ||||||||||||||||||||||||||||||||||
| </Box> | ||||||||||||||||||||||||||||||||||
| ); | ||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <Button variant="contained" fullWidth> | ||
| Full width button | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import * as React from 'react'; | ||
| import Button from '@mui/material/Button'; | ||
| import DeleteIcon from '@mui/icons-material/Delete'; | ||
| import CheckIcon from '@mui/icons-material/Check'; | ||
| import Stack from '@mui/material/Stack'; | ||
|
|
||
| export default function IntroButtons() { | ||
| return ( | ||
| <Stack direction="row" spacing={2}> | ||
| <Button disabled>Go back</Button> | ||
| <Button | ||
| variant="outlined" | ||
| startIcon={<DeleteIcon />} | ||
| color="error" | ||
| onClick={() => { | ||
| alert('Canceled.'); | ||
| }} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| variant="contained" | ||
| startIcon={<CheckIcon />} | ||
| onClick={() => { | ||
| alert('Confirmed.'); | ||
| }} | ||
| > | ||
| Confirm | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import * as React from 'react'; | ||
| import Button from '@mui/material/Button'; | ||
| import DeleteIcon from '@mui/icons-material/Delete'; | ||
| import CheckIcon from '@mui/icons-material/Check'; | ||
| import Stack from '@mui/material/Stack'; | ||
|
|
||
| export default function IntroButtons() { | ||
| return ( | ||
| <Stack direction="row" spacing={2}> | ||
| <Button disabled>Go back</Button> | ||
| <Button | ||
| variant="outlined" | ||
| startIcon={<DeleteIcon />} | ||
| color="error" | ||
| onClick={() => { | ||
| alert('Canceled.'); | ||
| }} | ||
|
Comment on lines
+15
to
+17
There was a problem hiding this comment. To consider if we should remove the onClick to get the "inline preview" |
||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| variant="contained" | ||
| startIcon={<CheckIcon />} | ||
| onClick={() => { | ||
| alert('Confirmed.'); | ||
| }} | ||
| > | ||
| Confirm | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can't do this yet, but this could make a lot of sense for v6 #40594.