@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
15 lines (14 loc) • 1.23 kB
JavaScript
import { __assign } from "tslib";
import React from 'react';
import clsx from 'clsx';
import Icon from '../icon';
import styles from './styles.css.js';
import useFocusVisible from '../internal/hooks/focus-visible';
export var Segment = React.forwardRef(function (_a, ref) {
var _b, _c;
var disabled = _a.disabled, text = _a.text, iconName = _a.iconName, iconAlt = _a.iconAlt, iconUrl = _a.iconUrl, isActive = _a.isActive, onClick = _a.onClick, onKeyDown = _a.onKeyDown, tabIndex = _a.tabIndex;
var focusVisible = useFocusVisible();
return (React.createElement("button", __assign({ className: clsx(styles.segment, (_b = {}, _b[styles.disabled] = !!disabled, _b), (_c = {}, _c[styles.selected] = isActive, _c)) }, focusVisible, { ref: ref, onClick: onClick, onKeyDown: onKeyDown, disabled: disabled, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined }),
(iconName || iconUrl) && (React.createElement(Icon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
React.createElement("span", null, text)));
});