Appearance

The Button provides a predefined set of appearance options.

Apart from the default vision of the Button, these alternative styling options enable you to add a bare, flat, or outline look by setting the look configuration without altering the dimensions of the default Button.

Bare Button

The Bare Button is visually stripped down to the bare minimum for all interaction states and inherits its color properties—for example, background-color, color, and border-color—from its parent element. To render a Bare Button, use the look="bare" configuration.

Copy Codeclass ButtonContainer extends React.Component {
    render() {
        return ([
            <Button look="bare">Bare Button</Button>, <span>|</span>,
            <Button look="bare" icon="calendar"></Button>
        ])
    }
}
ReactDOM.render(
    <ButtonContainer/>,
    document.querySelector('my-app')
);

Flat Button

The Flat Button removes its background and border only for its normal state and inherits its color properties—for example, color—from its parent element. All other interactive states inherit the states of the default Button. To render a Flat Button, use the look="flat" configuration.

Copy Codeclass ButtonContainer extends React.Component {
    render() {
        return ([
            <Button look="flat">Flat Button</Button>, <span>|</span>,
            <Button look="flat" icon="calendar"></Button>
        ])
    }
}
ReactDOM.render(
    <ButtonContainer/>,
    document.querySelector('my-app')
);

Outline Button

The Outline Button sets a transparent background and a solid border for its normal state and inherits all its color properties—for example, background-color, color, and border-color—from its parent element. To render an Outline Button, use the look="outline" configuration.

Copy Codeclass ButtonContainer extends React.Component {
    render() {
        return ([
            <Button look="outline">Outline Button</Button>, <span>|</span>,
            <Button look="outline" icon="calendar"></Button>
        ])
    }
}
ReactDOM.render(
    <ButtonContainer/>,
    document.querySelector('my-app')
);

Suggested Links

• API Reference of the Button