#### Source

```jsx static
// index.tsx
import React, { FC } from 'react';
import { AlertProps } from 'types';
import * as S from './styles';

export const Alert: FC<AlertProps> = props => {
	const { children } = props;
	return <S.Alert {...props}>{children}</S.Alert>;
};

Alert.defaultProps = { intent: 'info' };

export default Alert;
```

```jsx static
// styles.tsx
import styled from 'styled-components';
import { AlertProps } from 'types';
import { intentDecorator } from 'utils/styleUtils';

export const Alert = styled.aside<AlertProps>`
	font-weight: bold;
	max-height: 12.5rem;
	max-width: 28.875rem;
	overflow: hidden;
	padding: 0.75rem 3rem 0.75rem 0.75rem;
	position: relative;
	z-index: 99;
	:not(:last-child) {
		margin-bottom: 0.5rem;
	}
	${props => intentDecorator(props)}
`;
```

#### Standard Use

```jsx padded
<>
	<Alert intent="error">Error</Alert>
	<Alert intent="info">Info</Alert>
	<Alert intent="success">Success</Alert>
	<Alert intent="warning">Warning</Alert>
</>
```