Files
teleport/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx
T
Bartosz LeperandRafał Cieślak ed2f1b6025 Fix UI issues after introducing new button design system (#43663)
* A new Button component

* Update snapshots

* UI corrections after updating the Button component

* Update snapshots

* buttons.story.tsx: Group related buttons together

Also increase gap to increase visibility of individual groups

* Fix Cancel button in ClusterAdd in teleterm

* Correct display names of auth providers in ClusterLogin story

* Update Retry button in Unified Resources

* Fix the buttons story snapshot

* Add license

---------

Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>
2024-07-10 18:09:04 +00:00

47 lines
1.3 KiB
TypeScript

/**
* Teleport
* Copyright (C) 2023 Gravitational, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import { ButtonText } from 'design';
import { Add as AddIcon } from 'design/Icon';
export const ButtonTextWithAddIcon = ({
label,
onClick,
disabled,
iconSize = 12,
}: {
label: string;
onClick: () => void;
disabled?: boolean;
iconSize?: number | 'small' | 'medium' | 'large' | 'extraLarge';
}) => {
return (
<ButtonText onClick={onClick} inputAlignment disabled={disabled}>
<AddIcon
className="icon-add"
size={iconSize}
css={`
margin-right: 3px;
`}
/>
{label}
</ButtonText>
);
};