Alerts

import React from 'react';
import { Alert } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Alert color="success">This is a success alert — check it out!</Alert>
        <Alert color="danger">This is a danger alert — check it out!</Alert>
        <Alert color="warning">This is a warning alert — check it out!</Alert>
        <Alert color="info">This is a info alert — check it out!</Alert>
    </div>
);

export default Example;

Properties

Alert.propTypes = {
  className: PropTypes.string,
  closeClassName: PropTypes.string,
  color: PropTypes.string, // default: 'success'
  isOpen: PropTypes.bool,  // default: true
  toggle: PropTypes.func,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  // Controls the transition of the alert fading in and out
  // See [Fade](/components/fade/) for more details
  transition: PropTypes.shape(Fade.propTypes),
}

Link color

import React from 'react';
import { Alert } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Alert color="success">
            This is a success alert with{' '}
            <a href="#" className="alert-link">
                an example link
            </a>
            . Give it a click if you like.
        </Alert>
        <Alert color="danger">
            This is a danger alert with{' '}
            <a href="#" className="alert-link">
                an example link
            </a>
            . Give it a click if you like.
        </Alert>
        <Alert color="warning">
            This is a warning alert with{' '}
            <a href="#" className="alert-link">
                an example link
            </a>
            . Give it a click if you like.
        </Alert>
        <Alert color="info">
            This is a info alert with{' '}
            <a href="#" className="alert-link">
                an example link
            </a>
            . Give it a click if you like.
        </Alert>
    </div>
);

export default Example;

Additional content

import React from 'react';
import { Alert } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Alert color="success">
            <h4 className="alert-heading">Well done!</h4>
            <p>
                Aww yeah, you successfully read this important alert message. This example text is going to run a bit
                longer so that you can see how spacing within an alert works with this kind of content.
            </p>
            <hr />
            <p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </Alert>
    </div>
);

export default Example;

Dismissing

import React from 'react';
import { Alert } from 'seduo-ui';

class AlertExample extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            visible: true,
        };
        this.onDismiss = this.onDismiss.bind(this);
    }

    onDismiss() {
        this.setState({
            visible: false,
        });
    }

    render() {
        return (
            <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
                I am an alert and I can be dismissed!
            </Alert>
        );
    }
}

export default AlertExample;

Uncontrolled [disable] Alerts

For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledAlert does not require isOpen nor toggle props to work.

import React from 'react';
import { UncontrolledAlert } from 'seduo-ui';

function AlertExample() {
    return <UncontrolledAlert color="info">I am an alert and I can be dismissed!</UncontrolledAlert>;
}

export default AlertExample;

Alerts without fade

Fade can be disbaled using fade=false.

import React from 'react';
import { UncontrolledAlert, Alert } from 'seduo-ui';
export class AlertFadelessExample extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            visible: true,
        };
        this.onDismiss = this.onDismiss.bind(this);
    }

    onDismiss() {
        this.setState({
            visible: false,
        });
    }

    render() {
        return (
            <div>
                <Alert color="primary" isOpen={this.state.visible} toggle={this.onDismiss} fade={false}>
                    I am a primary alert and I can be dismissed without animating!
                </Alert>
            </div>
        );
    }
}
export function UncontrolledAlertFadelessExample() {
    return (
        <div>
            <UncontrolledAlert color="info" fade={false}>
                I am an alert and I can be dismissed without animating!
            </UncontrolledAlert>
        </div>
    );
}