export 'Button' (imported as 'Button') was not found in './Button' in reactjs

hope you all doing well, i am very new in react and i was following the guide, but got stuck with this strange problem while I import { Button} from ‘./Button’. Ill provide the full code :

import React from 'react';
import '../App.css';
import  { Button }  from './Button';
import './HeroSection.css';


function HeroSection() {
return (
<div className='hero-container'>

    <div className="hero-btns">
        <Button 
        className='btns' 
        buttonStyle='btn--outline' 
        buttonSize='btn--large'>Get Started</Button>
        <Button 
        className='btns' 
        buttonStyle='btn--primary' 
        buttonSize='btn--large'>Checkout Events
         <i className='far fa-play-circle' /></Button>
    </div>
</div>
     )
     }

export default HeroSection

Here is a Button.js code also:

  import React from 'react';
  import './Button.css';
  import {Link} from 'react-router-dom';

  const STYLES= ['btn--primary', 'btn--outline'];
  const SIZES= ['btn--medium', 'btn--large'];
  export const Buttom =({children, type, onClick, buttonStyle, 
  buttonSize}) => {const checkButtonStyle= 
  STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : 
  SIZES[0]

return(
    <Link to='/Login' className='btn-mobile'>
        <button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
        >
            {children}
        </button>
        
        </Link>
)
  };

Already Tried to put Button without {}, and tired to export default Button but it didn’t fixed it at all 🙁

>Solution :

if the above is the exact Button.js file you’ve used

then it’s just a typo, change Buttom to Button at line 7, and you’re good to go

Apart from that, you can simply export the Button as default

By adding this line

export default Button;

then you’ll have to import it like

import Button from './Button';