How to Assign a Specific key must have some values in interface

I am trying to extract either values into separate declaration and also it should so suggestion

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  bGColor?:
    | 'light'
    | 'primary'
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'dark';
}

The color must be any of the above following values but while trying in the interface it looks ugly and trying to extract the value in separate variable.

I did with enum but its not suggest while calling bGColor Property.

const color = 'light'
    | 'primary'
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'dark';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  bGColor?: color
}

expecting something like this