@salesforce/design-system-react/components/pill/__examples__/snapshot.jsx

Salesforce Lightning Design System for React

import React from 'react';
import createReactClass from 'create-react-class';
import IconSettings from '~/components/icon-settings';
import Pill from '~/components/pill'; // `~` is replaced with design-system-react at runtime
import Icon from '~/components/icon';
import Avatar from '~/components/avatar';

function noop () {}

const Example = createReactClass({
	displayName: 'PillExample',

	render () {
		return (
			<IconSettings iconPath="/assets/icons">
				<div className="slds-grid slds-grid--pull-padded slds-grid--vertical-align-center">
					<div className="slds-col--padded">
						<Pill
							labels={{
								label: 'Pill Label',
								title: 'Full pill label verbiage mirrored here',
								removeTitle: 'Remove'
							}}
							onClick={noop}
							onRemove={noop}
						/>
					</div>
					<div className="slds-col--padded">
						<Pill
							labels={{
								label: 'Pill Label',
								title: 'Full pill label verbiage mirrored here',
								removeTitle: 'Remove'
							}}
							onRemove={noop}
						/>
					</div>
					<div className="slds-col--padded">
						<Pill
							labels={{
								label: 'Pill Label',
								title: 'Full pill label verbiage mirrored here',
								removeTitle: 'Remove'
							}}
							icon={<Icon title="Account" category="standard" name="account" />}
							onClick={noop}
							onRemove={noop}
						/>
					</div>
					<div className="slds-col--padded">
						<Pill
							labels={{
								label: 'Pill Label',
								title: 'Full pill label verbiage mirrored here',
								removeTitle: 'Remove'
							}}
							avatar={
								<Avatar
									variant="user"
									title="User avatar"
									imgSrc="https://lightningdesignsystem.com/assets/images/avatar2.jpg"
								/>
							}
							onClick={noop}
							onRemove={noop}
						/>
					</div>
					<div className="slds-col--padded">
						<Pill
							labels={{
								label: 'Pill Label',
								title: 'Full pill label verbiage mirrored here',
								removeTitle: 'Remove'
							}}
							hasError
							icon={
								<Icon
									title="Error"
									category="utility"
									name="warning"
									className="slds-icon-text-error"
								/>
							}
							onClick={noop}
							onRemove={noop}
						/>
					</div>
					<div className="slds-col--padded">
						<Pill
							labels={{
								label: 'Pill Label',
								title: 'Full pill label verbiage mirrored here',
								removeTitle: 'Remove'
							}}
							assistiveText={{
								remove: 'Press delete or backspace to remove'
							}}
							bare
							variant="option"
							tabIndex="0"
							aria-selected="true"
							onRemove={noop}
						/>
					</div>
				</div>
			</IconSettings>
		);
	}
});

export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime