Skip to main content

Button

A customizable button component that serves as a trigger for actions and navigation.

Usage​

import { Button } from '@blendx-ui';

// Basic usage
<Button onClick={handleClick}>Click me</Button>

// With variant and size
<Button 
  onClick={handleClick}
  variant="primary"
  size="lg"
>
  Submit
</Button>

Props​

PropTypeRequiredDefaultDescription
childrennodeYes-The content of the button
onClickfunctionNo() => Function called when button is clicked
variantstringNo'primary'Visual style variant ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link', 'outline-*')
sizestringNo'md'Size of the button ('sm', 'md', 'lg')
disabledbooleanNofalseWhether the button is disabled
typestringNo'button'HTML button type ('button', 'submit', 'reset')
aselementTypeNo'button'Render as a different element (e.g., 'a', Link)
hrefstringNo-URL if rendered as anchor (as="a")
classNamestringNo-Additional CSS classes
blockbooleanNofalseWhether button should take full width

Parameters​

onClick​

  • Parameters: (event: React.MouseEvent<HTMLButtonElement>) - The click event
  • Returns: void

as​

  • Parameters: React.ElementType - Component to render the button as
  • Returns: Rendered button component

Return Value​

Returns a customizable button component with the following features:

  • Can be rendered as different elements (button, anchor, etc.)
  • Supports different visual styles through variants
  • Supports different sizes
  • Can be disabled
  • Can take full width of container (block)

Examples​

Basic Button​

<Button onClick={() => console.log('Clicked!')}>
  Click me
</Button>

Button Variants​

<>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="success">Success</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="warning">Warning</Button>
  <Button variant="info">Info</Button>
  <Button variant="light">Light</Button>
  <Button variant="dark">Dark</Button>
  <Button variant="link">Link</Button>
</>

Button Sizes​

<>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</>

Disabled Button​

<Button disabled>Disabled</Button>

Block Button​

<Button block>Full Width Button</Button>
<Button as="a" href="https://example.com">
  Link Button
</Button>

Accessibility​

  • Supports keyboard navigation and focus
  • When rendered as a button, uses the native button element for accessibility
  • When rendered as a link, includes proper ARIA attributes
  • Disabled state is properly communicated to screen readers

Best Practices​

  • Use button variants that match your UI's purpose (e.g., 'danger' for destructive actions)
  • Provide meaningful text in the button to describe the action
  • Use consistent button sizes throughout your application
  • Consider using icons alongside text for clarity where appropriate
  • For form submissions, set type="submit"
  • For navigation, use as="a" with href
  • IconButton
  • ButtonGroup
  • DropdownButton
  • StatefulButton
  • ToggleButton

Notes​

  • Based on React Bootstrap's Button component
  • For icon-only buttons, consider using IconButton instead for better accessibility

IconButton​

Description:
The IconButton component is a button that displays only an icon and can be customized with different sizes and rounded styles.

Usage:

import React from 'react';
import IconButton from 'blendx-ui/Button';
import { Check } from '@openedx/paragon/icons';

const MyIconButton = () => (
  <IconButton
    icon={Check}
    size="sm"
    rounded={true}
    onClick={() => alert('Icon Button clicked!')}
  />
);

export default MyIconButton;

Props:

  • icon (string, required): The icon to render inside the button.
  • size ('sm' | 'md' | 'lg' | 'inline'): Size of the button.
  • rounded (bool): If true, the button will have rounded corners.
  • className (string): Custom CSS class for the button.
  • disabled (bool): If true, the button is disabled.
  • onClick (func): Function called when the button is clicked.
  • onKeyDown (func): Function called when a key is pressed while the button is focused.
  • type (string): The type of the button. Default is 'button'.
  • variant (string): The variant of the button.

Example:

<IconButton
  icon={Check}
  size="lg"
  rounded={true}
  onClick={() => console.log('Icon Button clicked')}
  variant="success"
/>

ButtonGroup​

Description:
The ButtonGroup component is a container for grouping buttons together, with optional vertical stacking and toggling features.

Usage:

import React from 'react';
import { ButtonGroup, Button } from 'blendx-ui';

const MyButtonGroup = () => (
  <ButtonGroup size="md" vertical={false}>
    <Button variant="primary">Button 1</Button>
    <Button variant="secondary">Button 2</Button>
    <Button variant="success">Button 3</Button>
  </ButtonGroup>
);

export default MyButtonGroup;

Props:

  • size ('sm' | 'md' | 'lg' | 'inline'): Size of the buttons in the group.
  • vertical (bool): If true, the buttons are stacked vertically.
  • toggle (bool): If true, the buttons will act as a toggle group.
  • className (string): Custom CSS class for the button group.
  • role (string): ARIA role for the button group.
  • bsPrefix (string): Base CSS class name for the button group.

Example:

<ButtonGroup size="lg" vertical={true}>
  <Button variant="primary">Button 1</Button>
  <Button variant="secondary">Button 2</Button>
</ButtonGroup>

Note: The ButtonToolbar component has been omitted from this documentation. For grouping buttons in a toolbar, refer to the ButtonGroup component.

Re-exported Components:

  • ButtonGroup
  • IconButton

Dependencies​

RepositoryUsage Count
frontend-app-staff-dashboard55
frontend-app-dashboard19
frontend-app-course-authoring22
frontend-app-authn5
frontend-app-discussions2
frontend-app-account9
frontend-app-learning8
frontend-app-profile3

Detailed usage locations:​

frontend-app-staff-dashboard

  • src/components/BillingForm/index.jsx
  • src/components/CourseExploreCard.jsx
  • src/components/DocumentCard.jsx
  • src/components/MiniTable.jsx
  • src/components/ProfileCardLarge.jsx
  • src/components/ProgramCard.jsx
  • src/components/Support.jsx
  • src/components/VideoCard.jsx
  • src/pages/academics/academics-header/index.jsx
  • src/pages/ai-studio/AiStudio.jsx
  • src/pages/ai-studio/components/GeneratingView.jsx
  • src/pages/ai-studio/components/StructureView.jsx
  • src/pages/analytics/interaction-chart/index.jsx
  • src/pages/billing/billing-table/dummyData.jsx
  • src/pages/billing/index.jsx
  • src/pages/calendar/index.jsx
  • src/pages/create-program/index.jsx
  • src/pages/home/AiHome.jsx
  • src/pages/home/index.jsx
  • src/pages/home/learners-table/dummyData.jsx
  • src/pages/home/updates/recent-activity/page.jsx
  • src/pages/library/documents/index.jsx
  • src/pages/library/videos/index.jsx
  • src/pages/notifications/index.jsx
  • src/pages/organizations/CreateOrganisation.jsx
  • src/pages/organizations/index.jsx
  • src/pages/platform-settings/customization/appearance/BannerEdit.jsx
  • src/pages/platform-settings/customization/appearance/index.jsx
  • src/pages/platform-settings/customization/contact-information/index.jsx
  • src/pages/platform-settings/index.jsx
  • src/pages/platform-settings/integrations/IntegrationCard.jsx
  • src/pages/platform-settings/integrations/IntegrationDrawer.jsx
  • src/pages/program-single/courses/AddCoursesDrawer.jsx
  • src/pages/program-single/courses/index.jsx
  • src/pages/program-single/enrollment/EnrollDrawer.jsx
  • src/pages/program-single/enrollment/index.jsx
  • src/pages/program-single/program-team/AddUserDrawer.jsx
  • src/pages/program-single/program-team/index.jsx
  • src/pages/program-single/settings/DeleteProgramModal.jsx
  • src/pages/program-single/settings/index.jsx
  • src/pages/student-progress/course-engagement-chart/india.jsx
  • src/pages/student-progress/course-summary-table/index.jsx
  • src/pages/users/AddUsersDrawer.jsx
  • src/pages/users/index.jsx
  • src/pages/users/learners/index.jsx
  • src/pages/users/staffs/index.jsx
  • src/pages/users/teams/AddUsersToTeamDrawer.jsx
  • src/pages/users/teams/CreateTeamDrawer.jsx
  • src/pages/users/teams/TeamSingle.jsx
  • src/pages/users/teams/index.jsx
  • src/pages/utilities/notifications/NotificationsDrawer.jsx
  • src/pages/utilities/notifications/index.jsx
  • src/pages/view-ticket/MessageInput.jsx
  • src/pages/view-ticket/TicketHeader.jsx
  • src/utilities/notification/NotificationDrawer.jsx

frontend-app-dashboard

  • src/components/ActiveTickets.jsx
  • src/components/CartDrawer.jsx
  • src/components/CourseExploreCard.jsx
  • src/components/MiniTable.jsx
  • src/components/ProfileCardLarge.jsx
  • src/components/ProgramCard.jsx
  • src/components/RecentActivityCard.jsx
  • src/pages/calendar/index.jsx
  • src/pages/course-single/index.jsx
  • src/pages/discover/index.jsx
  • src/pages/home/AiHome.jsx
  • src/pages/home/index.jsx
  • src/pages/notifications/index.jsx
  • src/pages/progress/course-engagement-chart/india.jsx
  • src/pages/progress/course-summary-table/index.jsx
  • src/pages/support/InputDrawerSupport.jsx
  • src/pages/support/actionModalSupport.jsx
  • src/pages/support/index.jsx
  • src/pages/support/view-ticket/MessageInput.jsx

frontend-app-course-authoring

  • src/certificates/certificate-edit-form/CertificateEditForm.jsx
  • src/cohorts/CohortDrawer.jsx
  • src/cohorts/CohortList.jsx
  • src/content-tags-drawer/ContentTagsDrawer.jsx
  • src/course-outline/CourseOutline.jsx
  • src/course-outline/card-header/TitleButton.jsx
  • src/course-outline/content-actions/ContentActions.jsx
  • src/course-outline/header-navigations/HeaderNavigations.jsx
  • src/course-outline/outline-sidebar/OutlineSidebar.jsx
  • src/course-outline/section-card/SectionCard.jsx
  • src/course-outline/status-bar/StatusBar.jsx
  • src/course-outline/subsection-card/SubsectionCard.jsx
  • src/enrollments/EnrollDrawer.jsx
  • src/enrollments/index.jsx
  • src/export-page/CourseExportPage.jsx
  • src/generic/course-upload-image/index.jsx
  • src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx
  • src/generic/tag-count/index.jsx
  • src/schedule-and-details/basic-section/index.jsx
  • src/schedule-and-details/license-section/license-selector/index.jsx
  • src/studio-home/StudioHome.jsx
  • src/studio-home/card-item/index.jsx

frontend-app-authn

  • src/common-components/SocialAuthProviders.jsx
  • src/forgot-password/ForgotPasswordPage.jsx
  • src/login/LoginPage.jsx
  • src/reset-password/ResetPasswordPage.jsx
  • src/sandbox-login/index.jsx

frontend-app-discussions

  • src/discussions/posts/post/LikeButton.jsx
  • src/discussions/posts/post-actions-bar/PostActionsBar.jsx

frontend-app-account

  • src/BlendxSettings/profile-details/index.jsx
  • src/account-settings/EditableField.jsx
  • src/account-settings/EditableSelectField.jsx
  • src/account-settings/EmailField.jsx
  • src/account-settings/delete-account/DeleteAccount.jsx
  • src/account-settings/delete-account/SuccessModal.jsx
  • src/account-settings/reset-password/ResetPassword.jsx
  • src/components/CartDrawer.jsx
  • src/components/ProfileCardLarge.jsx

frontend-app-learning

  • src/course-home/outline-tab/widgets/FlagButton.jsx
  • src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
  • src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
  • src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
  • src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
  • src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
  • src/instructor-toolbar/InstructorToolbar.jsx
  • src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx

frontend-app-profile

  • src/BlendxProfile/index.jsx
  • src/components/CartDrawer.jsx
  • src/components/ProfileCardLarge.jsx