How to make the necessary indents when creating ui components?

Question

React

For example, I have a button component like this:


Purpose: to indent to the right, above the buttons.
As I did before: I had a prop className (for the button component), which supplemented the class of the button markup itself, I made the necessary indents with styles using this additional class. The problem with this method is that it's bad form.

Right now I'm using the handy classnames plugin and my code looks like this:

import React from 'react'; 
import './SimpleButton.sass';
import classNames from 'classnames';

export default function(props) {
  const className = classNames({
    'simple-button': true, 
    'simple-button_wide': props.width == 'wide',
    'simple-button_loading': props.loading,
  });

  switch (props.type) {
    case 'link': return(
      <a href={props.link} className={className}>{props.children}</a>
    );

    case 'submit': return(
      <button type="submit" className={className}>{props.children}</button>
    );

    default: return(
      <div className={className}>{props.children}</div>
    );
  }

  
}

How now to add a class to it, by which I could set the indents? Or what yet not a crutch method it is possible to solve it?