Na}{

File Content: `CardButton.tsx`

import { css } from '@emotion/css';
import React, { HTMLAttributes } from 'react';

import { GrafanaTheme2 } from '@grafana/data';
import { Icon, IconName, useStyles2 } from '@grafana/ui';

interface Props extends HTMLAttributes<HTMLButtonElement> {
  icon: IconName;
  onClick: () => void;
  children: React.ReactNode;
}

export const CardButton = React.forwardRef<HTMLButtonElement, Props>(
  ({ icon, children, onClick, ...restProps }, ref) => {
    const styles = useStyles2(getStyles);

    return (
      <button {...restProps} className={styles.action} onClick={onClick}>
        <Icon name={icon} size="xl" />
        {children}
      </button>
    );
  }
);

CardButton.displayName = 'CardButton';

const getStyles = (theme: GrafanaTheme2) => {
  return {
    action: css({
      display: 'flex',
      flexDirection: 'column',
      height: '100%',

      justifySelf: 'center',
      cursor: 'pointer',
      background: theme.colors.background.secondary,
      borderRadius: theme.shape.radius.default,
      color: theme.colors.text.primary,
      border: 'unset',
      width: '100%',

      justifyContent: 'center',
      alignItems: 'center',
      textAlign: 'center',

      '&:hover': {
        background: theme.colors.emphasize(theme.colors.background.secondary),
      },
    }),
  };
};

Name	Size	Permission
AccessControl	---	0755
Animations	---	0755
AppChrome	---	0755
AppNotifications	---	0755
BouncingLoader	---	0755
Branding	---	0755
Breadcrumbs	---	0755
CloseButton	---	0755
ColorScale	---	0755
DynamicImports	---	0755
EmptyListCTA	---	0755
FolderFilter	---	0755
Footer	---	0755
ForgottenPassword	---	0755
FormPrompt	---	0755
GraphNG	---	0755
Indent	---	0755
Layers	---	0755
LocalStorageValueProvider	---	0755
Login	---	0755
NavLandingPage	---	0755
NestedFolderPicker	---	0755
OptionsUI	---	0755
Page	---	0755
PageActionBar	---	0755
PageHeader	---	0755
PageInfo	---	0755
PageLoader	---	0755
PageNotFound	---	0755
PanelTypeFilter	---	0755
PasswordField	---	0755
PluginHelp	---	0755
QueryOperationRow	---	0755
RolePicker	---	0755
SVG	---	0755
Select	---	0755
SharedPreferences	---	0755
Signup	---	0755
SplitPaneWrapper	---	0755
TagFilter	---	0755
TimePicker	---	0755
TimeSeries	---	0755
TimelineChart	---	0755
Upgrade	---	0755
help	---	0755
modals	---	0755
CardButton.tsx	1311 bytes	0644
WithFeatureToggle.tsx	265 bytes	0644
connectWithCleanUp.tsx	1468 bytes	0644

File Content: CardButton.tsx

File Content: `CardButton.tsx`